El elemento tspan
El elemento <tspan>, similar al <span> de HTML se utiliza dentro del elemento <text> para marcar los fragmentos de texto que queremos configurar.
A continuación una lista de atributos que pueden ser utilizados con <tspan>.
| Atributo | Ejemplo | Valores |
|---|---|---|
| dx y dy | dy = "20" | número |
| baseline-shift | baseline-shift: super; | auto | baseline | sup | sub | porcentaje | extensión | inherit |
| textLength | textLength ="150" | número |
| lengthAdjust | lengthAdjust ="spacing" | spacing | spacingAndGlyphs |
| rotate | rotate="0 10 20 30..." | Puede tomar como valor una lista de números indicando la rotación individual en grados sexagesimales de cada carácter del elemento <text> o <tspan>. |
Un primer ejemplo
En el siguiente ejemplo utilizamos <tspan> para marcar la palabra murciélago, y cambiarle el color.
Reposicionar la línea base con baseline-shift
El atributo baseline-shift permite reposicionar la línea base ( baseline )
del texto, relativamente al elemento padre.
En el siguiente ejemplo el 2 de E = mc2 y de H2O están redimensionados con style = "font-size:75" y reposicionados con baseline-shift = "super" y baseline-shift = "sub" respectivamente.
Coordenadas absolutas y relativas con dx y dy
El texto del elemento <text> puede ser ajustado con coordenadas absolutas ( x, y ) o relativas ( dx, dy ) utilizando el elemento <tspan>.
En el siguiente ejemplo los versos de Lorca aparecen a 20px distancia uno de otro gracias al atributo dy ( dy = "20" ).
Si queremos hacer muchos cambios, para no cargar el documento de <tspan>s, podemos utilizar valores múltiples con dx y dy.
Ajustar la longitud del texto
con textLength y lengthAdjust
El SVG nos permite especificar la longitud del texto como valor del atributo textLength.
El atributo lengthAdjust, se utiliza junto con textLength para especificar si hay que ajustar solo el espaciado entre letras
( lengthAdjust = "spacing" ), o ajustar tanto el espaciado como la anchura de los glifos ( lengthAdjust = "spacingAndGlyphs" )
Girar las letras
con rotate
El atributo rotate puede tomar como valor una lista de números indicando la rotación individual en grados sexagesimales de cada carácter del elemento <text> o <tspan>;.
En este caso rotate="-30,0,30" lo que quiere decir que la primera letra del texto ( H ) tendrá una rotación de -30°, la segunda letra ( o ) se queda como tal, mientras que la tercera letra y las demás tendrán una rotación de 30°.