Texto en un trazado

facebook-svg gplus-svg twitter-svg

Además del texto en línea recta, el SVG incluye también la posibilitad de escribir a lo largo de una curva o de cualquier otro trazado. Para indicar que un texto tiene que aparecer escrito en un trazado, utilizamos el elemento <textPath> junto con el atributo xlink:href que refiere el trazado a seguir. IMPORTANTE: entre xlink: y href no hay espacio.

Atributo Ejemplo Descripcion
startOffset startOffset = "30%" porcentaje
xlink:href xlink:href = "#miLogo" porcentaje
IMPORTANTE: entre xlink: y href no hay espacio
dominant-baseline dominant-baseline = "middle" auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

A por ello

En el siguiente ejemplo utilizamos <textPath> para escribir texto en un trazado.
1. Definimos el trazado a seguir, una elipse en este caso, y lo colocamos dentro del elemento <defs> ( definiciones ). Los elementos que aparecen definidos dentro de <defs> no aparecen en pantalla, pero pueden ser utilizados más tarde con <textPath> por ejemplo, o con <use>.

<defs>
<path id="logoChulo" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1"/>
</defs>

2. Para escribir en un trazado no es necesario que el trazado aparezca en pantalla. Sin embargo en este ejemplo utilizamos el trazado definido anteriormente ( #logoChulo ).

<use xlink:href ="#logoChulo" />

Esto hará que el trazado aparezca en pantalla.

3. Dentro del elemento <text>, el elemento <textPath> indica al SVG que el texto tiene que aparecer escrito siguiendo el trazado #logoChulo. El parámetro startOffset = 7% indica que el texto dentro de <textPath> tiene que empiezar a 7% del inicio del trazado ( el pequeño punto rojo ).







   
   
      
            Mi Logo Chulo
      
    
Mi Logo Chulo

La dirección del trazado es importante

En el siguiente ejemplo, vamos a utilizar la misma elipse, dividida en dos trazados.
El primer trazado ( #miLogo ) va de izquierda a la derecha. El segundo ( #chulo ) empieza en el punto donde acaba el anterior ( x=205, y= 100 ) y vuelve hacia la izquierda cerrando la elipse. Podemos observar que la dirección del trazado es muy importante: la palabra "chulo" aparece escrita de derecha a izquierda y al revés, o sea: en el sentido del trazado. Todavía más: si utilizamos el atributo dominant-baseline="hanging", el texto tiene que "colgar" debajo del trazado, y efectivamente esto es lo que pasa ( de alguna manera ).









   
      
            Mi Logo
      
      
            C h u l o
      
    
Mi Logo C h u l o

Esta vez dibujamos los dos trazados de izquierda a derecha, desde el punto x=55,y=100 hasta el punto x=205,y=100.









   
      
            Mi Logo
      
      
            C h u l o
      
    
Mi Logo C h u l o

Para que "Mi Logo" aparezca también dentro de la elipse utilizamos el atributo dominant-baseline="hanging".








 
   
      
            Mi Logo
      
      
            C h u l o
      
    
Mi Logo C h u l o