Podemos hacer fluir el texto a lo largo de una línea curva con tres herramientas integradas en SVG: <path>, <text> y <textPath>.
El fragmento
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath alignment-baseline="top" xlink:href="https://css-tricks.com/snippets/svg/curved-text-along-path/#curve">
Dangerous Curves Ahead
</textPath>
</text>
</svg>Cómo llegamos allí
Imagina que dibujamos una línea curva en SVG y le damos una identificación llamada curve.
Vea el Pen NgwPYB de Geoff Graham (@geoffgraham) en CodePen.
Luego, colocamos contenido en el SVG usando el <text> etiqueta y dale un ancho que coincida con el SVG viewBox dimensiones. No vamos a ver nada todavía, pero sabemos que el texto está fuera de la pantalla en alguna parte.
Vea el Pen ZyaYOw de Geoff Graham (@geoffgraham) en CodePen.
Realmente queremos ver ese texto. Podemos envolver nuestro texto en el <textPath> y configúrelo para que siga las líneas de nuestra ruta curva llamando al ID de ruta que establecimos anteriormente.
Vea el Pen Kqywpe de Geoff Graham (@geoffgraham) en CodePen.
¡Ahora estamos cocinando con gas!
No queremos que se vea esa curva, así que démosle al camino un relleno transparente. También podríamos hacer esto en CSS, pero lo estamos aplicando en línea directamente en el marcado SVG por el bien de este ejemplo.
Vea el Pen xrPbgx de Geoff Graham (@geoffgraham) en CodePen.
¡El resto es CSS! El tamaño de fuente exacto dependerá del texto en sí y de la familia de fuentes que se esté utilizando, pero una vez que logre el equilibrio correcto, el SVG en sí manejará la capacidad de respuesta y garantizará que todo se mantenga en la curva en cualquier escala.
Vea el texto SVG de lápiz a lo largo de una ruta curva de Geoff Graham (@geoffgraham) en CodePen.
Podríamos aplicar este mismo método a cualquier tipo de trayectoria curva.
Vea el texto SVG de lápiz a lo largo de una ruta curva de Geoff Graham (@geoffgraham) en CodePen.