web-dev-qa-db-fra.com

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

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 et b. En fait, je veux que mon positionnement soit conforme à la roofline au lieu de baseline!

svgvertical-alignmentw3c
132
SeMeKh

La propriété 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 de w3c

Cette propriété spécifie comment un objet est aligné par rapport à son parent. Cette propriété spécifie quelle ligne de base de cet élément doit être alignée sur la ligne de base correspondante du parent. Par exemple, cela permet aux lignes de base alphabétiques en texte romain de rester alignées malgré les changements de taille de police. Par défaut, la référence de base porte 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 la direction de progression de bloc est la position de la ligne de base "idéographique" dans la table de lignes de base de l'objet en cours d'alignement.

Source W3C

Malheureusement, bien que ce soit la méthode "correcte" pour obtenir ce que vous cherchez, il semblerait que Firefox n'ait pas implémenté beaucoup d'attributs de présentation pour le module de texte SVG ( documentation MDN 'SVG dans Firefox' )

113
Simon West

Selon les spécifications SVG, alignment-baseline s'applique uniquement à <tspan>, <textPath>, <tref> et <altGlyph>. D'après ce que je comprends, il est utilisé pour compenser ceux de l'objet <text> situé au-dessus d'eux. Je pense que ce que vous recherchez, c'est dominant-baseline.

Les valeurs possibles de dominant-baseline sont les suivantes:

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

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

206
toutankh

attr ("dominante-baseline", "central")

44
user1087079

Si vous testez cela dans IE, dominante-baseline et alignement-baseline ne sont pas pris en charge.

Le moyen le plus efficace de centrer le texte dans IE consiste à utiliser quelque chose comme ceci avec "dy":

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

La valeur négative le fera monter et une valeur positive de dy le fera descendre. J'ai trouvé que l'utilisation de -.4em me paraissait un peu plus centrée verticalement que -.5em, mais vous en jugerez.

28
whyoz

Après avoir examiné recommandation SVG , j'ai compris que les propriétés de la ligne de base sont censées positionner le texte par rapport à un autre texte, en particulier lors du mélange de polices et/ou de langues différentes. Si vous souhaitez positionner du texte de sorte que son sommet se trouve à y, vous devez utiliser dy = "y + the height of your text".

7
rjax