Texte SVG
Description de l'élément <text>
L'élément SVG <text> spécifie un élément graphique utilisé pour afficher du texte. Il est possible d'appliquer un motif, un chemin de découpe, un masque, un dégradé ou un filtre à <text>, comme pour les autres éléments graphiques SVG. Le texte non inclus dans un élément <text> ne sera pas rendu. En revanche, le texte inclus dans un élément <text> peut être rendu avec un retour à la ligne automatique, un formatage prédéfini ou sur un chemin.
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 international du texte :
- texte de gauche à droite ou bidirectionnel,
- l'orientation verticale et horizontale du texte,
- la mise en page complexe du texte,
- l'alignement des glyphes sur différentes lignes de base.
Il est possible de créer du contenu SVG multilingue en substituant différentes chaînes de texte en fonction de 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> :
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>Exemple de l'élément SVG <text> avec l'attribut rotate :
Exemple de l'élément SVG <text> avec l'attribut rotate
<!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>Dans l'exemple suivant, l'élément <text> est utilisé avec l'élément <tspan>, qui peut contenir différentes mises en forme et positions.
Exemple de l'élément SVG <text> utilisé avec l'élément <tspan> :
Exemple de l'élément SVG <text> utilisé avec l'élément <tspan>
<!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>Exemple de l'élément SVG <text> utilisé avec l'élément <a> :
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="https://www.w3docs.com/learn-html/svg-intro.html" 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>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 à une position précédente. |
| dy | Spécifie le décalage vertical d'une position de texte par rapport à une position précédente. |
| rotate | Spécifie la rotation de l'orientation pour chaque glyphe individuel. |
| 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 que le texte doit occuper. |
| text-anchor | Spécifie l'alignement horizontal du texte. |
| dominant-baseline | Spécifie l'alignement vertical du texte. |
L'élément SVG <text> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Que permet de faire l'élément SVG 'text' dans HTML ?