Elemento <textPath> de SVG

El elemento <textpath> de SVG se utiliza para disponer de texto a lo largo de una ruta (por ejemplo, circular), lo que da un efecto muy atractivo. Los navegadores presentan el texto a lo largo de la ruta de manera ligeramente diferente, por lo que asegúrese de verificar el aspecto del texto en navegadores compatibles.

Ejemplo en línea

<svg width="500"　height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1　0 0,0　100,0"　/>　　　　
</defs>　　　　
<text　x="20"　y="80"　style="stroke:　#000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com tutorial básico.../textPath>　　　　
</text>　　　　
</svg>

Efecto de imagen después de ejecutar:

Atención a cómo el elemento <path> (dentro del elemento <defs>) tiene una propiedad id. Este valor de id se refiere al <textpath> desde la propiedad xlink:href del atributo.

Si la longitud de la ruta es más corta que la longitud del texto, solo se dibujará la parte del texto dentro del rango de extensión de la ruta.

También puede usar rutas más avanzadas. Este es un ejemplo de ruta de texto más compleja:

<svg　width="500"　height="200">
　　　　<defs>
　　　　　　　　<path　id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20　l100,0　l100,30　q0,100　150,100"/>
　　　　</defs>
　　　　<text　x="20"　y="40"　style="stroke:　#000000;">
　　　　　　　　<textPath　xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　Tutoriales básicos....
　　　　　　　　</textPath>
　　　　</text>
</svg>

Este ejemplo define una ruta de texto compuesta por una línea horizontal, una línea diagonal y una curva.

Efecto de imagen después de ejecutar: