texto - text tag svg

¿Cómo obtener un efecto de esquema en el texto en SVG?

Question

Solo quiero una imagen SVG simple que tenga texto arbitrario en un ángulo, lo cual puedo hacer. La cosa es que también quiero que el texto tenga una especie de efecto de "contorno". Como en lugar de una D sólida, los bordes interiores y exteriores de la letra D se dibujan con una línea de un grosor específico y el resto de la D no se dibuja en absoluto, para parecer casi "hueco".

¿SVG puede hacer esto?

Answer 1

Los objetos gráficos en SVG pueden tener un relleno (negro por defecto) y un trazo (ninguno por defecto). Si desea tener un contorno rojo en su texto, establezca fill = "none" y stroke = "red". Es posible que también desee ajustar el valor de la propiedad de ancho de trazo.

Answer 2

Otro ejemplo de contornos y resplandores se da aquí: 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>

Answer 3

Puede usar un <filter> para esto, más específicamente una combinación con <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>

Es posible que deba ajustar los atributos x / y / width / height del filtro para adaptar el tamaño del lienzo del filtro, consulte también Valor de altura de Humongous para <filter> que no previene el corte o corte de desenfoque gaussiano en los bordes .

También creé una d3.js interactiva d3.js power para comparar diferentes soluciones presentadas en este hilo aquí con varias configuraciones para jugar: https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa

Answer 4

Sí puede ;-)

Traté de darme cuenta de que con Inkscape y luego edité el origen del archivo svg. Simplemente no lo llene y use un trazo con color y ancho para dibujarlo. Lo tengo:

<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 parte interesante está en el atributo "estilo".

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

Answer 5

orden de pintura: trazo; funcionó maravillas para mí en este gráfico D3 en el que estoy trabajando.

Mi último css:

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

Mi fuente (desplácese un poco hacia abajo): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty