Comment obtenir un effet de contour sur du texte en SVG?

Je veux juste une image SVG simple qui a du texte arbitraire sur un angle, ce que je peux faire. Chose est, je veux aussi que le texte ait une sorte de "contour" effet. A la place d'un solide D, les bords intérieur et extérieur de la lettre D sont dessinés avec une ligne d'une épaisseur spécifiée et le reste du D n'est pas tracé du tout, de manière à avoir l'air presque "creux".Comment obtenir un effet de contour sur du texte en SVG?

Est-ce que SVG peut faire ça?

Source

2009-01-14 cletus

Oui il peut ;-)

J'ai essayé de comprendre que, avec Inkscape puis modifié la source du svg-fichier. Ne le remplissez pas et utilisez un trait de couleur et de largeur pour le dessiner. que j'ai eu:

<text x="100" y="100" id="text2383" xml:space="preserve" style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"> 
 
<tspan x="100" y="100" id="tspan2385">D</tspan></text>

La partie intéressante est dans l'attribut "style".

"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"

Source

2009-01-14 07:17:47 Xn0vv3r

Sweet. J'ai réussi à extraire cela d'Inkscape (plutôt que d'éditer du XML, ce qui est cool). – cletus

Juste pour info, un grand nombre de styles inclus par inkscape sont _usually_ redondants (en ce sens qu'ils sont les paramètres par défaut). Pour l'attribut de style ci-dessus, vous pourriez probablement sortir avec: '" remplir: aucun; accident vasculaire cérébral: # 000000; trait-largeur: 1px; "' Vous pourriez aussi omettre 'stroke: # 000000' si vous étiez en train d'utiliser du noir. – nHaskins

Les objets graphiques dans SVG peuvent avoir un remplissage (noir par défaut) et un trait (aucun par défaut). Si vous voulez avoir un contour rouge sur votre texte, alors remplissez fill = "none" et stroke = "red". Vous pouvez également modifier la valeur de la propriété stroke-width.

Source

2009-02-18 13:40:34 codedread

Un autre exemple pour les contours et est donnée ici devient incandescent,: http://www.w3.org/People/Dean/svg/texteffects/index.html

<svg width="350" height="75" viewBox="0 0 350 75"><title>MultiStroke</title><rect x="0" y="0" width="350" height="75" style="fill: #09f"/><g style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact"><text x="175" y="55" style="fill: white; stroke: #0f9; stroke-width: 14"> 
    Stroked Text 
    </text><text x="175" y="55" style="fill: white; stroke: #99f; stroke-width: 8"> 
    Stroked Text 
    </text><text x="175" y="55" style="fill: white; stroke: black; stroke-width: 2"> 
    Stroked Text 
    </text></g> 
</svg>

Source

2014-04-25 05:56:57 Nav

Sur Firefox, cela ne semble pas très bien si les choses sont plus petites (par ex.à l'intérieur d'un groupe avec 'transform' avec' scale() '), le contour apparaît irrégulier, peut-être un problème de précision. – phk

peinture ordre: accident vasculaire cérébral; travaillé des merveilles pour moi dans ce tableau D3 sur lequel je travaille.

Ma dernière css:

.name-text { 
    font-size: 18px; 
    paint-order: stroke; 
    stroke: #000000; 
    stroke-width: 1px; 
    stroke-linecap: butt; 
    stroke-linejoin: miter; 
    font-weight: 800; 
}

Ma source (faites défiler vers le bas un peu): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty

Source

2014-10-22 00:59:47

Merci, m'a sauvé! –

paint-order: le trait n'est pas supporté sur IE. Y a-t-il une astuce/astuce pour soutenir cela sur IE? – AlfaTeK

Brillant cela a fonctionné pour moi :) Merci. – maheeka

Vous pouvez utiliser un <filter> pour cela, plus précisément une combinaison avec <feMorphology>:

<svg style="height:100px;width:100%;background-color:Green"> 
 

 
<defs> 
 
<filter id="whiteOutlineEffect"> 
 
    <feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" /> 
 
    <feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 1 0"/> 
 
    <feMerge> 
 
    <feMergeNode in="WHITENED"/> 
 
    <feMergeNode in="SourceGraphic"/> 
 
    </feMerge> 
 
</filter> 
 
</defs> 
 

 
<g> 
 
    <text x="10" y="50" fill="black" font-size="60" filter="url(#whiteOutlineEffect)"> 
 
    Example 
 
    </text> 
 
</g> 
 

 
</svg>

Vous pourriez avoir à régler les x/y/width/height attributs du filtre afin d'adapter la taille de la toile filtrante, voir aussi Humongous height value for <filter> not preventing cutoff ou Gaussian blur cutoff at edges.

J'ai aussi créé un d3.js -powered démo interactive pour comparer différentes solutions présentées dans ce fil ici avec différents paramètres pour jouer: https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa

Source

2017-09-08 19:13:44 phk

Comment obtenir un effet de contour sur du texte en SVG?

Répondre

Questions connexes