Cómo conseguir un efecto de contorno en el texto en formato SVG?

Yo sólo quiero una simple imagen SVG, que tiene algo de arbitrario de texto en un ángulo, que puedo hacer. La cosa es que, yo también quiero el texto para tener una especie de «esquema» del efecto. Como en lugar de un sólido D, el interior y el exterior de los bordes de la letra D se dibujan con una línea de un espesor especificado y el resto de los D no está dibujado a todos, así como a buscar casi «hueco».

Puede SVG hacer esto?

OriginalEl autor cletus | 2009-01-14

3 Kommentare

  1. 32

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

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

    Gracias, me salvaste!
    la pintura de orden: el trazo no es compatible con IE. es allí cualquier consejo/truco para apoyar esta en IE?
    Genial esto funcionó para mí 🙂 Gracias.

    OriginalEl autor Ian Venskus

  2. 7

    De los objetos gráficos en formato SVG puede tener un relleno (negro por defecto) y un accidente cerebrovascular (ninguno por defecto). Si desea tener un contorno rojo en su texto, a continuación, establezca fill=»none» y accidente cerebrovascular=»rojo». Puede que desee ajustar también el valor de la stroke-width propiedad.

    OriginalEl autor codedread

  3. 3

    Otro ejemplo para los contornos y los 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>
    En Firefox no se ve tan bueno en el caso de que las cosas son más pequeñas (por ejemplo dentro de un grupo con transform con scale()),el esquema parece desigual, tal vez una precisión problema.

    OriginalEl autor Nav

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea