Un tampon de fidélité rond avec le nom du café qui suit la courbe du cercle, un logo qui inscrit sa devise tout autour d'un badge : ce texte qui épouse une forme n'est pas du texte droit qu'on aurait fait pivoter lettre par lettre, c'est <textPath> qui le fait suivre un tracé existant.
Sans lui, courber du texte en SVG demanderait de positionner chaque lettre à la main, avec un angle différent à chaque fois, un travail long et fragile au moindre changement de taille.
Définition
<textPath> fait suivre à du texte le tracé d'un <path> déjà défini ailleurs dans le document, référencé par son attribut href. Il ne s'utilise jamais seul : il se place à l'intérieur d'un <text>, à la place du texte brut, et hérite du style posé sur ce <text> englobant.
Attributs principaux
| Attribut | Rôle |
|---|---|
href | Référence l'identifiant du path à suivre, par exemple #monTrace |
startOffset | Décale le point de départ du texte le long du tracé |
method | align par défaut, ou stretch pour étirer les lettres sur les courbes serrées |
spacing | auto ou exact, pour l'espacement entre les lettres sur la courbe |
Le path suivi n'a pas besoin d'être visible : il peut rester invisible, sans contour ni remplissage, en ne servant que de guide au texte.
Exemple de rendu concret
Voici un texte courbé tout autour d'un cercle, comme un tampon de café qui inscrit son nom sur le pourtour d'un rond de couleur.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#78350f" />
<path
id="cercleTexte"
d="M 100 20 A 80 80 0 1 1 99.9 20"
fill="none"
stroke="none"
/>
<text
font-size="16"
font-family="sans-serif"
fill="#fef3c7"
letter-spacing="2"
>
<textPath href="#cercleTexte" startOffset="5%">CAFÉ DES ARTISANS</textPath>
</text>
</svg>Le path circulaire sert uniquement de guide invisible : lui donner fill="none" et stroke="none" permet de ne garder que la trajectoire, sans qu'un contour ne s'ajoute au dessin final.
La direction du tracé compte aussi : un path dessiné de gauche à droite fait avancer le texte de gauche à droite, mais un path inversé renverse le sens de lecture des lettres. C'est un réglage à vérifier au premier essai, surtout sur un tracé importé depuis un logiciel de dessin plutôt qu'écrit à la main.
Différence avec <text> simple
Un <text> classique se positionne avec des coordonnées x et y fixes, sur une ligne droite. <textPath> abandonne ces coordonnées au profit du tracé référencé : chaque lettre est positionnée et orientée automatiquement selon la géométrie du path, ce qui serait impossible à obtenir à la main avec un simple <text>.
Piège classique : <textPath> ne fonctionne que si le path référencé existe déjà dans le document et possède un id correctement orthographié. Si le path est mal identifié, le texte retombe silencieusement en ligne droite normale, sans le moindre message d'erreur dans la console.
Cas d'usage réel
Le texte courbé sert aux logos ronds comme les tampons ou les sceaux, aux textes qui longent un chemin sur une carte, ou aux titres qui suivent la forme d'une bannière ondulée. C'est la technique derrière les logos type « cachet officiel » que l'on croise sur les certificats ou les badges de fidélité.
Foire aux questions
path suivi doit-il être visible à l'écran ?Non, il est courant de le rendre invisible avec fill="none" et stroke="none". Le path continue de définir la trajectoire du texte même sans être dessiné, un peu comme un rail caché sous le wagon qui le porte.
Oui, en utilisant un path composé de deux arcs qui se referment presque sur eux-mêmes, comme dans l'exemple du tampon circulaire. Le texte parcourt alors tout le pourtour, du point de départ jusqu'au point d'arrivée du tracé. Sur une courbe très serrée, l'attribut method="stretch" évite que les lettres ne s'écrasent les unes sur les autres.
Oui, avec startOffset, exprimé en pourcentage de la longueur totale du tracé ou en unité absolue. Une valeur de 50% démarre le texte exactement au milieu du chemin plutôt qu'à son origine.