Une phrase de prix où seul le montant final doit ressortir en vert, un titre où un mot précis change de couleur au milieu d'une ligne : impossible avec un seul <text>, qui ne connaît qu'une seule couleur et une seule taille pour tout son contenu. C'est le rôle de <tspan> de découper cette ligne en morceaux stylés indépendamment.
Sans lui, styliser un seul mot dans une phrase SVG obligerait à couper la phrase en plusieurs <text> séparés, avec le calcul manuel de la position de chacun.
Définition
<tspan> délimite une portion de texte à l'intérieur d'un <text>, ou d'un autre <tspan>, pour lui appliquer une position ou un style différents, sans rompre la continuité visuelle du texte. Il n'a pas d'existence en dehors de son parent : seul, hors d'un <text>, il ne s'affiche pas.
Attributs principaux
| Attribut | Rôle |
|---|---|
x, y | Repositionne le tspan à une coordonnée absolue |
dx, dy | Décale le tspan par rapport à la position actuelle du texte |
fill | Change la couleur de cette portion uniquement |
font-weight | Change la graisse de cette portion uniquement, par exemple pour mettre un mot en gras |
Sans x ni y précisés, un <tspan> continue simplement là où le texte précédent s'est arrêté : c'est ce comportement qui permet de changer la couleur d'un seul mot sans casser l'alignement du reste de la phrase.
Exemple de rendu concret
Voici une phrase où seul le mot « gratuite » change de couleur, grâce à un tspan sans repositionnement.
<svg viewBox="0 0 260 60" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="35" font-size="18" font-family="sans-serif" fill="#1e293b">
Livraison
<tspan fill="#16a34a" font-weight="bold">gratuite</tspan>
dès 50€
</text>
</svg>Le tspan « gratuite » hérite de la position et de la taille du texte parent, seule sa couleur et sa graisse changent : le reste de la phrase continue de s'écouler normalement autour de lui.
Différence avec <text>
<text> est un élément autonome, capable d'exister seul dans un SVG. <tspan> ne l'est pas : c'est un outil de découpage interne, pensé pour vivre à l'intérieur d'un <text>. Plusieurs tspans peuvent s'imbriquer les uns dans les autres, mais jamais en dehors d'un texte englobant.
Piège classique : placer un <tspan> directement dans le SVG, sans le nicher dans un <text>, ne provoque aucune erreur visible mais le tspan ne s'affiche tout simplement pas. C'est une des causes de « texte manquant » les plus difficiles à repérer, parce que le code semble correct à première lecture.
Cas d'usage réel
Les tspans servent à créer plusieurs lignes de texte à la main dans un graphique SVG, un tspan par ligne avec un y croissant, à mettre en valeur un chiffre clé dans une légende, ou à afficher une unité en plus petit après une valeur numérique, comme « 12 » suivi de « kg » en taille réduite. Combiné à <textPath>, un tspan permet même de faire ressortir un seul mot au sein d'un texte qui suit une courbe.
Comme pour <text>, le contenu d'un tspan reste du vrai texte : les mots mis en couleur restent sélectionnables à la souris et lisibles par les technologies d'assistance, contrairement à une image où chaque mot stylisé aurait été découpé et exporté à la main.
Foire aux questions
tspan dans un autre tspan ?Oui, un tspan peut contenir d'autres tspans, ce qui permet de styliser une sous-portion d'un mot déjà stylisé. Cette imbrication reste rare en pratique, réservée aux mises en forme très fines.
tspan peut-il changer la police utilisée ?Oui, tous les attributs de présentation du texte comme font-family, font-size ou font-style peuvent être redéfinis sur un tspan, exactement comme sur le <text> qui le contient.
tspan avec x et y s'affiche-t-il ailleurs que prévu ?Parce que x et y sur un tspan repositionnent le texte de façon absolue, sur une nouvelle ligne de base, alors que dx et dy décalent seulement par rapport à la position courante. Confondre les deux fait sauter le texte à un endroit inattendu du SVG.