Recherche…
Paramètres
<text> | Détails |
|---|---|
| X | La position x du texte. |
| y | La position y du texte. |
| dx | Décalage relatif en position x. |
| dy | Décalage relatif en position y. |
| tourner | Spécifie le déplacement angulaire des glyphes de texte. |
| textLength | Ajuste le texte dans la longueur donnée. |
| longueurAdjust | Spécifie si le crénage ou le crénage et les glyphes sont compressés / étirés pour adapter le texte à textLength. Valeurs: espacement ou espacementAndGlyphes |
| - | Paramètres communs à tous les éléments de fragmentation de texte (text, tref, textPath, tspan) |
| ancre de texte | Spécifie l'alignement horizontal. Valeurs: début, milieu, fin. |
| changement de ligne de base | Décale la ligne de base du texte en fonction des valeurs fournies par le tableau de polices pour le positionnement en exposant ou en indice (sub, super) ou par un pourcentage ou une longueur positif ou négatif. Valeurs: sub, super,% ou length. |
Remarques
baseline-shift n'est pas pris en charge par les versions les plus récentes de Firefox et des navigateurs Microsoft en juillet 2016.
Dessiner du texte
<svg xmlns="http://www.w3.org/2000/svg">
<text x="40" y="60" font-size="28">Hello World!</text>
</svg>
La coordonnée x et y spécifie la position du coin inférieur gauche du texte (à moins que text-anchor ait été modifié).
Super et indice
En utilisant le paramètre baseline-shift, vous pouvez spécifier super ou indice. Mais ce n'est pas supporté par tous les principaux navigateurs.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
<text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>
Pour une solution multi-navigateur, vous pouvez utiliser dy, dx et la taille de police relative.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
<text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>
Faire pivoter le texte
La propriété tourner fait pivoter chaque caractère selon l'angle spécifié.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>
Pour faire pivoter l'élément de texte entier, vous devez utiliser la propriété transform.
<svg xmlns="http://www.w3.org/2000/svg">
<text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>
Positionnement individuel des lettres avec des tableaux de valeurs X et Y
<svg width="400px" height="200px">
<text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
Individually Spaced Text
</text>
</svg>
L'élément Text prend en charge le placement individuel des lettres en acceptant un tableau de valeurs pour x et y.