El elemento tspan

facebook-svg gplus-svg twitter-svg

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.



El veloz murciélago hindú...

El veloz murciélago hindú...

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.



Equivalencia entre masa y energía:
		E = mc2
		

Molécula de agua:
		H2O


Equivalencia entre masa y energía: E = mc2 Molécula de agua: H2O

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" ).




Corre que te pillo, 
Corre que te agarro, 
Mira que te lleno
La cara de barro.


Corre que te pillo, Corre que te agarro, Mira que te lleno La cara de barro.

Si queremos hacer muchos cambios, para no cargar el documento de <tspan>s, podemos utilizar valores múltiples con dx y dy.



Frijol  
    saltarín


Frijol saltarín

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" )




El veloz 


murciélago


El veloz murciélago

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°.



  
    
      Hola ¿qué tal?
    
  
Hola ¿qué tal?