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

Solo quiero una imagen SVG simple que tenga texto arbitrario en un ángulo, lo que 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".¿Cómo obtener un efecto de contorno en el texto en SVG?

¿Puede SVG hacer esto?

Fuente

2009-01-14 cletus

Sí se puede ;-)

I tratado de darse cuenta de que con Inkscape y luego editado la fuente de la SVG-Archivo. Simplemente no lo llene y use un trazo con color y ancho para dibujarlo. que tiene que:

<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 es en el atributo "estilo".

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

Fuente

2009-01-14 07:17:47 Xn0vv3r

dulces. Logré sacar esto también de Inkscape (en lugar de editar XML, lo cual es genial). – cletus

Solo para FYI, muchos de los estilos incluidos por inkscape son usualmente_ redundantes (en cuanto a que son los predeterminados). Para el atributo de estilo anterior, probablemente podría salirse con la suya: '" fill: none; stroke: # 000000; stroke-width: 1px; "' También podría omitir 'stroke: # 000000' si fuera en realidad usando negro. – nHaskins

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.

Fuente

2009-02-18 13:40:34 codedread

Otro ejemplo de contornos y brillos 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>

Fuente

2014-04-25 05:56:57 Nav

En Firefox esto no se ve tan bien si las cosas son más pequeñas (p.dentro de un grupo con 'transform' con' scale() '), el esquema parece desigual, quizás un problema de precisión. – phk

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

Mi css definitiva:

.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 hacia abajo un poco): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty

Fuente

2014-10-22 00:59:47

¡Gracias, me salvó! –

orden de la pintura: el trazo no es compatible con IE. ¿Hay alguna sugerencia/truco para apoyar esto en IE? – AlfaTeK

Brillante, esto funcionó para mí :) Gracias. – maheeka

Se puede utilizar 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>

puede que tenga que ajustar los atributos x/y/width/height del filtro con el fin de adaptar el tamaño del lienzo de filtro, consulta Humongous height value for <filter> not preventing cutoff o Gaussian blur cutoff at edges.

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

Fuente

2017-09-08 19:13:44 phk

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

Respuesta

Cuestiones relacionadas