SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <textPath> se utiliza para representar el texto junto con una determinada ruta.
Para representar texto junto con una determinada ruta, encierre el texto en un elemento <textPath> que tenga un atributo href con una referencia al elemento <path>.
Sintaxis:
<textPath href="path" >
Your Text Here
</textPath>
Atributo:
- href : la URL de la ruta o forma básica en la que representar el texto.
- lengthAdjust : donde se debe aplicar el ajuste de longitud al texto.
- método : qué método para representar glifos individuales a lo largo de la ruta.
- ruta : la ruta en la que se debe representar el texto.
- side : de qué lado de la ruta se debe representar el texto.
- espaciado : cómo se debe manejar el espacio entre los glifos.
- startOffSet : qué tan lejos debe estar desplazado el comienzo del texto desde el comienzo de la ruta.
- textLength : el ancho del espacio en el que se representará el texto.
- Atributos globales: algunos atributos globales utilizados como atributos centrales y atributos de estilo, etc.
Ejemplo:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="Geek" fill="yellow" stroke="green" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10, 10 10,40 Q10,70 45,70 Q70,70 75,50" /> <text> <textPath href="#Geek"> The Geeky Text Along The Path </textPath> </text> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera