alignement vertical d'un élément de texte en SVG

Question

Disons que j'ai le fichier SVG :

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

Je veux en quelque sorte aligner le haut de a y b . En fait, je veux que mon positionnement soit conforme au roofline au lieu de baseline !

Answer 1

Selon la spécification SVG, alignment-baseline ne s'applique qu'aux <tspan> , <textPath> , <tref> y <altGlyph> . D'après ce que j'ai compris, il est utilisé pour compenser ceux de la Commission européenne. <text> objet au-dessus d'eux. Je pense que ce que vous cherchez est dominant-baseline .

Valeurs possibles de dominant-baseline sont :

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Vérifiez la recommandation du W3C pour le dominant-baseline propriété pour plus d'informations sur chaque valeur possible.

Answer 2

Le site alignment-baseline est ce que vous recherchez, elle peut prendre les valeurs suivantes

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

Description du w3c

Cette propriété indique comment un objet est aligné par rapport à son parent. Cette propriété spécifie quelle ligne de base de cet élément doit être être alignée sur la ligne de base correspondante du parent. Par exemple, cela permet aux lignes de base alphabétiques d'un texte romain de rester alignées en cas de changements de taille de police. Par défaut, il s'agit de la ligne de base portant le même nom que la valeur calculée de la propriété alignment-baseline. C'est-à-dire que la position du point d'alignement "idéographique" dans le dans le sens de la progression du bloc est la position de la ligne de base "idéographique" dans le sens de la progression du bloc. dans la table des lignes de base de l'objet à aligner.

Source W3C

Malheureusement, bien que ce soit la manière "correcte" d'obtenir ce que vous recherchez, il semblerait que Firefox n'ait pas mis en œuvre un grand nombre d'attributs de présentation pour le module texte SVG ( SVG dans Firefox - Documentation MDN )

Answer 3

Attr("dominant-baseline", "central")

Answer 4

Si vous effectuez ce test dans IE, la ligne de base dominante et la ligne de base d'alignement ne sont pas prises en charge.

La façon la plus efficace de centrer le texte dans IE est d'utiliser quelque chose comme ceci avec "dy" :

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

Une valeur négative le déplacera vers le haut et une valeur positive de dy le déplacera vers le bas. J'ai trouvé que l'utilisation de -.4em me semble un peu plus centrée verticalement que -.5em, mais c'est à vous d'en juger.

Answer 5

Après avoir examiné le Recommandation SVG J'ai compris que les propriétés de la ligne de base sont destinées à positionner le texte par rapport à d'autres textes, notamment lorsque l'on mélange différentes polices ou langues. Si vous voulez positionner le texte de façon à ce que son sommet soit à y alors vous devez utiliser dy = "y + the height of your text" .