Texto en un trazado
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 ).
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 ).
Esta vez dibujamos los dos trazados de izquierda a derecha, desde el punto x=55,y=100 hasta el punto x=205,y=100.
Para que "Mi Logo" aparezca también dentro de la elipse utilizamos el atributo dominant-baseline="hanging".
Esta es una pequeña demostración donde puede arrastrar los puntos azules para modificar el trazado utilizado para <textPath> y puede ver que pasa con el texto al modificar la posición de estos puntos.
See the Pen Text along a quadratic bezier path by Gabi (@enxaneta) on CodePen.