SVG Text - Apprendre le HTML

Description de l'élément `<text>`

L'élément SVG <text> définit un élément graphique servant à afficher du texte. Il est placé à l'intérieur d'un élément <svg> et positionné par ses coordonnées x et y. Vous pouvez appliquer un motif, un chemin de découpe, un masque, un dégradé ou un filtre à <text>, tout comme aux autres éléments graphiques SVG. Tout texte ne se trouvant pas à l'intérieur d'un élément <text> ne sera pas rendu.

Remarque : Le <text> SVG ne revient pas automatiquement à la ligne. Un seul élément <text> est rendu sur une seule ligne ; le texte ne passera pas à la ligne suivante lorsqu'il atteignra le bord du canevas SVG. Pour répartir le texte sur plusieurs lignes, vous devez positionner les lignes vous-même avec des éléments <tspan> (chacun avec sa propre coordonnée y), utiliser des éléments <text> distincts, ou faire suivre au texte un chemin avec <textPath>.

Le texte SVG prend en charge des fonctionnalités typographiques telles que les décorations de texte, le choix de la police et l'utilisation de ligatures discrétionnaires, stylistiques ou historiques.

SVG prend également en charge les besoins de traitement de texte international :

texte de gauche à droite ou bidirectionnel,
orientation verticale et horizontale du texte,
mise en page de texte complexe,
alignement des glyphes sur différentes lignes de base.

Il est possible d'avoir du contenu SVG multilingue en substituant différentes chaînes de texte selon la langue préférée de l'utilisateur.

Pour styliser le texte, vous pouvez utiliser des propriétés CSS spécifiques au texte telles que font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width et fill.

Exemple de l'élément SVG `<text>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

Rotation du texte : `transform` vs l'attribut `rotate`

Il existe deux façons différentes de faire pivoter du texte SVG, et il est facile de les confondre :

transform="rotate(angle cx cy)" fait pivoter l'ensemble de l'élément <text> comme un seul bloc autour d'un point central. La chaîne reste droite ; toute la ligne est inclinée.
L'attribut rotate fait pivoter chaque glyphe (caractère) individuellement sur place. Les lettres sont inclinées, mais la ligne de texte s'étend toujours horizontalement.

L'exemple ci-dessous utilise transform pour incliner toute la ligne de 40 degrés autour du point (30, 60) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

En revanche, l'attribut rotate fait pivoter chaque caractère individuellement sans incliner la ligne de base :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Alignement du texte avec `text-anchor` et `dominant-baseline`

Par défaut, les coordonnées x/y marquent le début du texte et se situent sur la ligne de base alphabétique. Deux attributs permettent de modifier cela :

text-anchor contrôle l'alignement horizontal par rapport à x. Valeurs : start (défaut, le texte commence à x), middle (le texte est centré sur x) et end (le texte se termine à x). C'est essentiel pour centrer des étiquettes.
dominant-baseline contrôle l'alignement vertical par rapport à y. Valeurs courantes : auto/alphabetic (défaut), middle, central, hanging et text-bottom. Utilisez middle pour centrer verticalement le texte sur la coordonnée y.

Dans l'exemple suivant, les trois étiquettes partagent le même x="125", mais text-anchor les aligne différemment par rapport à la ligne de référence en pointillés :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

Utiliser `<tspan>` pour plusieurs lignes

L'élément <tspan> est un enfant de <text> qui vous permet de modifier la position, le style ou la mise en forme d'une portion de texte sans quitter l'élément <text> parent. Comme le texte SVG ne revient pas à la ligne automatiquement, <tspan> est la méthode standard pour répartir un bloc logique de texte sur plusieurs lignes : donnez à chaque <tspan> ses propres x et y (ou utilisez dy pour décaler par rapport à la ligne précédente).

Utilisez <tspan> plutôt que des éléments <text> distincts lorsque les parties forment ensemble une seule étiquette accessible ou partagent un style — un <tspan> hérite des attributs de son parent et reste partie du même nœud de texte. Utilisez des éléments <text> distincts lorsque les parties sont véritablement indépendantes.

L'exemple ci-dessous utilise <tspan> pour positionner trois lignes :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

Placer du texte sur un chemin avec `<textPath>`

Pour faire suivre à du texte une courbe ou toute autre forme, enveloppez-le dans un élément <textPath> et pointez son href vers l'id d'un <path> (ou autre forme). Le texte suit alors ce chemin. Définissez le chemin à l'intérieur de <defs> pour qu'il soit réutilisable et qu'il ne soit pas dessiné lui-même. Consultez le chapitre SVG <path> pour comprendre le fonctionnement des données de chemin (d).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Exemple de l'élément SVG `<text>` utilisé avec l'élément `<a>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

Style et accessibilité

Le texte à l'intérieur de <text> et <tspan> est stylisé avec des propriétés spécifiques au texte, que vous pouvez définir comme attributs de présentation (ex. font-size="20", font-weight="bold", font-family="Verdana") ou avec CSS. Les plus courants sont font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (la couleur du texte) et stroke/stroke-width (le contour). Voir le tableau des Attributs ci-dessous pour les attributs liés à la mise en page.

Accessibilité : Le texte SVG est rendu en tant que graphique, il n'est donc pas toujours exposé aux technologies d'assistance de la même manière que le texte HTML ordinaire. Donnez à un SVG significatif un élément <title> en premier enfant de l'élément <svg> (ou <text>), et ajoutez aria-label/role="img" pour que les lecteurs d'écran l'annoncent. Par exemple :
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Attributs

Attribut	Description
x	Spécifie la coordonnée x de départ de la ligne de base du texte.
y	Spécifie la coordonnée y de départ de la ligne de base du texte.
dx	Spécifie le décalage horizontal d'une position de texte par rapport à la position de texte précédente.
dy	Spécifie le décalage vertical d'une position de texte par rapport à la position de texte précédente.
rotate	Fait pivoter chaque glyphe individuellement (pas l'élément entier — utilisez `transform="rotate(...)"` pour cela).
lengthAdjust	Spécifie comment le texte est compressé ou étiré pour s'adapter à la largeur définie par l'attribut textLength.
textLength	Spécifie la largeur dans laquelle le texte doit s'adapter.
text-anchor	Spécifie l'alignement horizontal du texte : `start`, `middle` ou `end`.
dominant-baseline	Spécifie l'alignement vertical du texte sur sa ligne de base (ex. `middle`, `hanging`).
font-family	Définit la police, ex. `Arial, sans-serif`.
font-size	Définit la taille du texte, ex. `20` ou `1.5em`.
font-weight	Définit la graisse, ex. `normal` ou `bold`.
font-style	Définit le style, ex. `normal` ou `italic`.

L'élément SVG <text> prend également en charge les Attributs globaux et les Attributs d'événement.

Exercice

Pratique

Quel attribut centre le texte SVG horizontalement sur sa coordonnée 'x' ?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Description de l'élément <text>

Exemple de l'élément SVG <text> :

Rotation du texte : transform vs l'attribut rotate

Alignement du texte avec text-anchor et dominant-baseline

Utiliser <tspan> pour plusieurs lignes

Placer du texte sur un chemin avec <textPath>

Exemple de l'élément SVG <text> utilisé avec l'élément <a> :

Style et accessibilité

Attributs

Exercice

Description de l'élément `<text>`

Exemple de l'élément SVG `<text>` :

Rotation du texte : `transform` vs l'attribut `rotate`

Alignement du texte avec `text-anchor` et `dominant-baseline`

Utiliser `<tspan>` pour plusieurs lignes

Placer du texte sur un chemin avec `<textPath>`

Exemple de l'élément SVG `<text>` utilisé avec l'élément `<a>` :