Text-anchor - Propriété CSS

text-anchor

Résumé des caractéristiques de la propriété text-anchor

Description rapide
Définit si un texte en SVG s'ancre par le milieu, le départ ou la fin.
Statut
Standard
Utilisable sur
SVG
Valeurs prédéfinies
start | middle | end
Pourcentages
Ne s'appliquent pas.
Valeur initiale
start
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété text-anchor passe d'une valeur à l'autre sans transition.
Module W3C
SVG (Scalable Vector Graphics)
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

Schéma syntaxique de text-anchor.

text-anchor - Syntax DiagramSyntax diagram of the text-anchor CSS property for SVG. See stylescss.free.fr for details. start start middle middle end endtext-anchor:;text-anchor:;
Schéma syntaxique de la propriété text-anchor
Les liens du schéma donnent accès à plus de détails

Description.

En SVG, les textes sont positionnés par leurs attributs x et y. La propriété text-anchor indique quelle partie du texte correspond à la coordonnée x : le début, le centre ou la fin. Le résultat est comparable à celui de la propriété text-align utilisable en HTML.

La propriété text-anchor peut être appliquée aux balises SVG suivantes : text, textPath, tref et tspan.

Valeurs pour text-anchor.

  • text-anchor: start;

    C'est le début du texte qui correspond à la position définie par l'attribut x.

    SVG
    Exemple avec text-anchor:start Texte aligné par le début
    text-anchor:start;
  • text-anchor: middle;

    Le milieu du texte correspond à la position définie par l'attribut x.

    SVG
    Exemple avec text-anchor:middle Texte aligné par le milieu
    text-anchor:middle;
  • text-anchor: end;

    La fin du texte correspond à la position définie par l'attribut x.

    SVG
    Exemple avec text-anchor:end Texte aligné par la fin
    text-anchor:end;

Valeurs communes à toutes les propriétés :

text-anchor: initial (start) text-anchor: inherit text-anchor: revert text-anchor: revertLayer text-anchor: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété text-anchor.

text-anchor :
SVG
Propriété text-anchor - Effet sur un texte SVG Ce texte sur plusieurs lignes est aligné conformément à la propriété text-anchor

Prise en charge de la propriété text-anchor.

Comme le montre le tableau ci-dessous, la propriété text-anchor est très bien prise en charge par tous les navigateurs actuels.

1
Propriété
text-anchor
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété text-anchor.

  • SVG (Scalable Vector Graphics)

    Définition de la propriété text-anchor.
    WD
    30 Octobre 2001
    Document de travail.
    CR
    30 Avril 2002
    Candidat à la recommandation.
    PR
    09 Juin 2011
    Proposé à la recommandation.
    REC
    16 Août 2011
    Recommandation.

  • SVG (Scalable Vector Graphics)

    Pas de changement concernant la propriété text-anchor.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

Autres propriétés spécifiques à SVG.

Les propriétés utilisables spécifiquement sur des images SVG sont regroupées dans la spécification Scalable Vector Graphics (SVG) . En voici la liste, en plus de text-anchor.

Propriétés :

r
Définit le rayon d'un cercle en SVG.
rx
Définit le rayon horizontal d'une ellipse, en SVG.
ry
Définit le rayon vertical d'une elliipse, en SVG.
shape-rendering
Définit si la priorité doit être donnée à la précision ou bien au temps de calcul, lors du tracé d'une forme en SVG.
text-rendering
Active ou désactive le traitement de la typographie évoluée (ligatures, crénage...)
⚠
vector-effect
Définit comment les transformations (rotations, changements d'échelle, etc.) agissent.