Texto <text> en SVG

Elemento SVG

Para dibujar texto, utilice el elemento <text>.

　　　　　　<h1>Texto SVG</h1>
　　　　　　<svg width="550" alt="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40" y="23" Texto: </text>
　　　　　　　　　　　　<text x="40" y="40" relleno="rgb(121,0,121)">es.oldtoolbag.com tutorial básico </text>
　　　　　　　　　</g>　
　　　　　　</svg>

El efecto después de ejecutarlo es el siguiente:

Texto SVG

Explicación de uso

x: define la posición superior izquierda del texto.

y: define la posición superior del texto.

ancho: Define el ancho.

altura: Define la altura.

relleno: La propiedad de relleno se utiliza para definir el color de relleno.

Texto girado

Se utiliza para crear texto girado.

<svg alt="100" ancho="200">
　　<text x="0" y="15" relleno="rojo" transform="girar(30　20,40)">es.oldtoolbag.com</text>
</svg>

El efecto después de ejecutarlo es el siguiente:

Explicación de uso

x: Define la posición superior izquierda.

y: Define la posición superior.

ancho: Define el ancho.

altura: Define la altura.

relleno: La propiedad de relleno se utiliza para definir el color de relleno.

Texto multilínea

Se utiliza para crear texto multilínea. Utilizando el elemento <tspan>, se puede disponer del elemento <text> en cualquier número de subgrupos.

<svg width="570" alt="100">
　　<g>
　　<text x="40" y="23" Texto multilínea: </text>
　　<text x="40" y="40" relleno="rgb(121,0,121)">es.oldtoolbag.com
　　　<tspan x="40" y="60" fuente-peso="negrita"> Texto básico en línea. </tspan>
　　　</text>
　　</g>
　</svg>

El efecto después de ejecutarlo es el siguiente:

Explicación de uso

x: Define la posición superior izquierda.

y: Define la posición superior.

ancho: Define el ancho.

altura: Define la altura.

relleno: La propiedad de relleno se utiliza para definir el color de relleno.

Texto del vínculo

Se utiliza para crear texto con vínculo.

　　　　　　<svg width="500" alt="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20" y="10"Text como vínculo: </text>
　　　　　　　　　
　　　　　　　　　　　　<a xlink:href="https://es.oldtoolbag.com/svg-tutorial" objetivo="_blank">
　　　　　　　　　　　　　　　<text tipo de fuente-familia="Verdana" tipo de fuente-tamaño="30" x="40" y="40"　
　　　　　　　　　　　　　　　relleno="rgb(121,0,121)">es.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

El efecto después de ejecutarlo es el siguiente:

Explicación de uso

x: Define la posición superior izquierda.

y: Define la posición superior.

ancho: Define el ancho.

altura: Define la altura.

relleno: La propiedad de relleno se utiliza para definir el color de relleno.