Podemos ajustar el texto a lo largo de una línea curva con tres herramientas integradas en SVG: , y .
El fragmento
Dangerous Curves Ahead Cómo llegamos allí
Imagina que dibujamos una línea curva en SVG y le damos un ID llamado curve.
Vea el Pen NgwPYB de Geoff Graham (@geoffgraham) en CodePen.
Luego, colocamos contenido en el SVG usando la etiqueta y le damos un ancho que coincida con las viewBoxdimensiones del SVG . 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 la etiqueta y configurarlo para que siga las líneas de nuestra ruta curva llamando al ID de ruta que configuramos 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 trazado 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 exacto de la fuente 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í mismo 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.