L'élément <text> en SVG permet d'intégrer du texte dans vos graphiques vectoriels. Les attributs x et y définissent la position initiale du texte. x contrôle le point de départ horizontal, tandis que y détermine la ligne de base du texte.

Alignement du Texte

L'attribut text-anchor ajuste le point d'ancrage du texte par rapport aux coordonnées x spécifiées. Les valeurs possibles sont :

• start (par défaut) : L'ancrage est au début du texte.
• middle : L'ancrage est au milieu du texte.
• end : L'ancrage est à la fin du texte.

<svg width="200" height="150">
   <text x="50" y="40" text-anchor="start">Texte à gauche</text>
   <text x="50" y="70" text-anchor="middle">Texte centré</text>
   <text x="50" y="100" text-anchor="end">Texte à droite</text>
   </svg>

Style et Apparence du Texte

Il est possible de styliser le texte SVG en utilisant les propriétés CSS, notamment pour le contour (stroke), la couleur de remplissage (fill), et la taille de la police (font-size). Pour simuler un contour sans remplissage, on applique une couleur au stroke et on retire le fill.

<svg width="200" height="60">
   <text x="10" y="40" style="stroke: teal; stroke-width: 1px; fill: none; font-size: 24px;">Texte en contour</text>
   </svg>

Espacement des Lettres et des Mots

Les propriétés letter-spacing et word-spacing permettent de contrôler l'espacement entre les caractères et entre les mots respectivement. L'ajustement fin de l'espace entre des paires de caractères spécifiques est géré par la propriété kerning.

<svg width="300" height="60">
   <text x="10" y="40" style="font-size: 24px; letter-spacing: 3px; fill: green;">Espacé</text>
   </svg>

   <svg width="400" height="60">
   <text x="10" y="40" style="font-size: 24px; word-spacing: 15px; fill: darkorange;">Mots séparés</text>
   </svg>

   <svg width="250" height="60">
   <text x="10" y="40" style="font-size: 24px; kerning: 5px; fill: purple;">Kerning</text>
   </svg>

Rotation du Texte

La transformation rotate peut être appliquée à un élément <text> pour le faire pivoter. Elle prend un angle en degrés et, optionnellement, les coordonnées du centre de rotation.

<svg width="150" height="150">
   <text x="50" y="75" transform="rotate(-30 50,75)" style="font-size: 20px; fill: blue;">Tourné</text>
   </svg>

Texte sur Plusieurs Lignes avec <tspan>

L'élément <tspan> est utilisé pour structurer le texte en plusieurs lignes ou pour appliquer des styles spécifiques à des portions de texte. Les attributs dx et dy permettent de décaler horizontalement et verticalement les lignes ou segments de texte respectivement.

<svg width="150" height="100">
   <text x="10" y="30" style="font-size: 18px;">
       Première ligne
       <tspan x="10" dy="25">Deuxième ligne</tspan>
       <tspan x="10" dy="25">Troisième ligne</tspan>
   </text>
   </svg>

   <svg width="200" height="100">
   <text x="10" y="30" style="font-size: 18px;">
       Ligne A
       <tspan dx="50" dy="15">Ligne B décalée</tspan>
   </text>
   </svg>

L'attribut baseline-shift, apppliqué à un <tspan>, permet de positionner le texte en exposant (super) ou en indice (sub).

<svg width="300" height="60">
   <text x="10" y="40" style="font-size: 20px;">
       Texte normal
       <tspan style="baseline-shift: super; font-size: 14px;">Exposant</tspan>
       et
       <tspan style="baseline-shift: sub; font-size: 14px;">Indice</tspan>.
   </text>
   </svg>

Sélection de Langue avec <switch>

L'élément <switch> permet d'afficher conditionnellement du contenu basé sur des propriétés système, comme la langue de l'utilisateur. L'attribut systemLanguage spécifie la langue pour laquelle un groupe d'éléments doit être rendu.

<svg width="150" height="40">
     <switch>
         <g systemLanguage="fr">
             <text x="10" y="20">Bonjour</text>
         </g>
         <g systemLanguage="en">
             <text x="10" y="20">Hello</text>
         </g>
         <g systemLanguage="es">
             <text x="10" y="20">Hola</text>
         </g>
     </switch>
   </svg>