web-dev-qa-db-fra.com

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

Je veux juste une simple image SVG qui a du texte arbitraire sur un angle, ce que je peux faire. La chose est, je veux aussi que le texte ait une sorte d'effet "contour". Comme plutôt qu'un D plein, les bords intérieurs et extérieurs de la lettre D sont dessinés avec une ligne d'une épaisseur spécifiée et le reste du D n'est pas dessiné du tout, de manière à avoir l'air presque "creux".

SVG peut-il faire cela?

svg
44
cletus

Oui il peut ;-)

J'ai essayé de réaliser cela avec Inkscape puis j'ai édité la source du fichier svg. Ne le remplissez pas et utilisez un trait de couleur et de largeur pour le dessiner. J'ai compris:

<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;"
31
Xn0vv3r

Commande de peinture: trait; fait des merveilles pour moi dans ce tableau D3 sur lequel je travaille.

Mon css final:

.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 un peu vers le bas): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty

45
Ian Venskus

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 devrez peut-être régler les attributs x/y/width/height du filtre afin d'adapter la taille du canevas du filtre, voir aussi - Valeur de hauteur énorme pour <filtre> n'empêchant pas la coupure ou coupure de flou gaussien sur les bords .

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

12
phk

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

8
codedread

Un autre exemple pour les contours et les lueurs est donné ici: 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>
3
Nav