Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.
Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
« Référence des attributs SVG (anglais)
L'attribut text-anchor
est utilisé pour aligner un élément text
par rapport à un point dont la position est définie au début "start
", au milieu "middle
" ou à la fin "end
" de son contenu.
text-anchor
s'applique à chaque morceau de text (voir "text-chunks" (anglais)) d'un élément text
donné. Chaque morceau de text a une position initiale courante qui est représentée par un point dans le référentiel de coordonnées de l'utilisateur déterminée selon le contexte: par les valeurs des attributs x
et y
sur un élément <text>
, par la position du premier caractère affiché d'un morceau de texte pour un élément <tspan>
, <tref>
ou <altGlyph>
quels que soient les valeurs de ses attributs x
ou y
ou à la position initiale du texte d'un élément <textPath>
.
En tant qu'attribut de présentation, il peut aussi être utilisé directement comme une propriété dans une feuille de style CSS.
Contexte d'utilisation
Catégories | Attribut de présentation |
---|---|
Valeur | start | middle | end | inherit |
Animable | Oui |
Document de spécification | SVG 1.1 (2ème Édition) (anglais) |
- start
- Les caractères affichés sont alignés de manière à ce que le début du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à gauche du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à droite. Pour certains textes asiatiques avec une orientation verticale de haut en bas, le résultat sera alors comparable à un alignement en haut.
- middle
- Les caractères sont affichés de manière à ce que le milieu du texte affiché soit la position initiale du texte. (Pour du texte sur un chemin
textPath
, le texte est dans un premier temps organisé virtuellement selon une ligne droite. Le point équidistant des extrémités horizontales du texte est alors déterminé. Puis, le texte est projeté sur le chemintextPath
avec le point calculé précédemment placé à la position courante du texte.) - end
- Les caractères sont alignés de sorte que la fin du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à droite du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à gauche.
Exemple
<?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg" version="1.1"> <!-- Materialisation of anchors --> <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> <!-- Anchors in action --> <text text-anchor="start" x="60" y="40">A</text> <text text-anchor="middle" x="60" y="75">A</text> <text text-anchor="end" x="60" y="110">A</text> <!-- Materialisation of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red" /> <style><![CDATA[ text{ font: bold 36px Verdana, Helvetica, Arial, sans-serif; } ]]></style> </svg>
Résultat
Éléments
Les éléments suivants ont l'attribut text-anchor