On peut placer le texte le long d' une ligne courbe avec trois outils intégrés directement dans SVG: , et .
L'extrait
Dangerous Curves Ahead Comment nous y sommes arrivés
Imaginez que nous dessinions une ligne courbe en SVG et que nous lui donnions un identifiant appelé curve.
Voir le Pen NgwPYB de Geoff Graham (@geoffgraham) sur CodePen.
Ensuite, nous déposons le contenu dans le SVG à l'aide de la balise et lui donnons une largeur qui correspond aux viewBoxdimensions SVG . Nous n'allons encore rien voir, mais nous savons que le texte est là hors écran quelque part.
Voir le Pen ZyaYOw de Geoff Graham (@geoffgraham) sur CodePen.
Nous voulons vraiment voir ce texte. Nous pouvons envelopper notre texte dans la balise et le définir pour suivre les lignes de notre chemin courbe en appelant l'ID de chemin que nous avons défini précédemment.
Voir le Pen Kqywpe de Geoff Graham (@geoffgraham) sur CodePen.
Maintenant, nous cuisinons au gaz!
Nous ne voulons pas que cette courbe soit vue, alors donnons au tracé un remplissage transparent. Nous pourrions également le faire en CSS, mais nous l'appliquons directement en ligne dans le balisage SVG pour le bien de cet exemple.
Voir le Pen xrPbgx de Geoff Graham (@geoffgraham) sur CodePen.
Le reste est CSS! La taille de police exacte dépendra du texte lui-même et de la famille de polices utilisée, mais une fois que vous aurez trouvé le bon équilibre, le SVG lui-même gérera la réactivité et garantira que tout reste sur la courbe à n'importe quelle échelle.
Voir le texte SVG du stylo le long d'un chemin incurvé par Geoff Graham (@geoffgraham) sur CodePen.
Nous pourrions appliquer cette même méthode à tout type de tracé courbe.
Voir le texte SVG du stylo le long d'un chemin incurvé par Geoff Graham (@geoffgraham) sur CodePen.