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

Disons que j’ai le fichier SVG:

 b a  

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 la baseline de baseline !

La propriété d’ 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 object 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 restr alignées sur les modifications de taille de police. Par défaut, la ligne 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 du bloc est la position de la ligne de base “idéographique” dans la table de référence de l’object en cours d’alignement.

Source W3C

Malheureusement, bien que ce soit la manière “correcte” de réaliser ce que vous espériez, Firefox n’a pas implémenté beaucoup d’atsortingbuts de présentation pour le module de texte SVG ( “SVG dans la documentation MDN de Firefox” )

Selon les spécifications SVG, alignment-baseline s’applique uniquement à , , et . D’après ce que je comprends, il est utilisé pour compenser ceux de l’object au-dessus d’eux. Je pense que ce que vous recherchez est dominant-baseline .

Les 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 W3C pour la propriété dominant-baseline pour plus d’informations sur chaque valeur possible.

attr (“ligne de base”, “central”)

Si vous testez cela dans IE, les lignes de base et d’alignement ne sont pas sockets en charge.

Le moyen le plus efficace de centrer le texte dans IE consiste à utiliser quelque chose comme ça avec “dy”:

  Ya Text  

La valeur négative le décale et une valeur positive de dy la décale. J’ai trouvé que l’utilisation de -.4em me semble un peu plus centrée verticalement que -.5em, mais vous en serez le juge.

Après avoir examiné la recommandation SVG, j’ai compris que les propriétés de la ligne de base sont destinées à positionner le texte par rapport à un autre texte, en particulier lors du mélange de différentes fonts et / ou langages. Si vous voulez poster du texte pour qu’il soit en haut à y vous devez utiliser dy = "y + the height of your text" .