Elemento <tspan> en SVG

El elemento <tspan> de SVG se utiliza para dibujar texto multilínea en SVG. No es necesario ubicar absolutamente cada línea de texto, el elemento <tspan> permite colocar una línea de texto en relación con la línea anterior. Además, el elemento <tspan> permite seleccionar y copiar varios renglones de texto a la vez, no solo un elemento de texto.

Ejemplo <tspan>

Este es un ejemplo <tspan>simple:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan línea tspan　1</tspan>
　　　　　　　　<tspan línea tspan　2</tspan>
　　　　</texto>
</svg>

Este es la imagen de resultado:

Nota cómo el resultado de <tspan> hace que las líneas de texto se posicionen una en relación con la otra (después de la otra).

ubicación vertical

Si desea posicionar verticalmente la línea en relación con la otra, puede usar la propiedad dy (delta y):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan línea tspan　1</tspan>
　　　　　　　　<tspan dy="10">línea tspan　2</tspan>
　　　　</texto>
</svg>

Ahora, debido a que el segundo elemento <tspan> tiene la propiedad dy configurada como " 10". Por lo tanto, la segunda línea de texto se muestra debajo de la primera línea de texto10píxeles. Esto es la imagen de resultado:

Si desea posicionar el elemento <tspan> en una ubicación y en y absoluta, utilice las propiedades como si fuera el elemento <texto>.

Si se escriben varios números en la propiedad dy, cada número se aplica a los caracteres del texto dentro del elemento <tspan>. Este es un ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10" y="15">
　　　　　　　　　　　　<tspan dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</texto>
　　　　</svg>

Este es la imagen generada. Nota cómo cambia el espacio vertical entre los caracteres.

ubicación horizontal

Para posicionar el texto en el eje x de manera relativa, se puede usar la propiedad dx (delta x). El siguiente ejemplo muestra la configuración de dx a30 efectos. Nota que ahora la segunda línea de texto se muestra en la parte inferior del final de la primera línea de texto (no en el inicio)30 píxeles:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan línea tspan　1</tspan>
　　　　　　　　<tspan dx="30" dy="10">línea tspan　2</tspan>
　　　　</texto>
</svg>

Este es la imagen de resultado:

Si se especifican varios números en la propiedad dx, cada número se aplica a cada letra dentro del elemento <tspan>. Este es un ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><texto x="10" y="20">
　　　　<tspan dx="5　10　20">123</tspan>
</texto></svg>

Este es la imagen de resultado:

También puede configurar la propiedad x para fijar la coordenada x del texto de una línea. Esto es útil si desea mostrar una lista de líneas sin ajustar una debajo de la otra. Este es un ejemplo donde x se configura a10　Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<texto y="20">
　　　　　　　　<tspan x="10">línea tspan　1</tspan>
　　　　　　　　<tspan x="10" dy="15">línea tspan　2</tspan>
　　　　　　　　<tspan x="10" dy="15">línea tspan　3</tspan>
　　　　</texto>
</svg>

Este es la imagen de resultado:

Estilo de elemento tspan

Puede configurar estilos de elementos individualmente. Por lo tanto, puede usar el elemento <tspan> para configurar el estilo de un bloque de texto, para que sea diferente del resto del texto. Este es un ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><texto x="10" y="20">
　　　　Aquí está un <tspan estilo="fuente-peso: negrita;">negrita</tspan> palabra.
</texto></svg>

Este es la imagen de resultado:

Desplazamiento de la línea base para subíndices y superíndices

Puede usar la línea base-la propiedad CSS shift se utiliza para crear subíndices y superíndices con el elemento <tspan>. Esto es una línea base en SVG-ejemplo de shift, que muestra cómo:

<svg ancho="500" altura="100">　　　　
<text x="10" y="20">　　　　
Aquí hay un texto con <tspan style="baseline-mayúscula: super;">supersímbolo</tspan>　　　　
y <tspan style="baseline-mayúscula: sub;">subíndice</tspan> mezclado con normal　　　　
texto.　　　　
</texto>　　　　
</svg>

Este es el gráfico generado. (Nota: Firefox puede no soportarlo)