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

142

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 aet b. En fait, je veux que mon positionnement soit en fonction de la rooflineplace de baseline!

svg vertical-alignment w3c SeMeKh
la source
La seule réponse qui fonctionne dans IE: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Réponses:

116

La alignment-baselinepropriété correspond à 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é 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 avec la ligne de base correspondante du parent. Par exemple, cela permet aux lignes de base alphabétiques du texte romain de rester alignées lors des changements de taille de police. La valeur par défaut est la ligne de base portant le même nom que la valeur calculée de la propriété align-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 ligne de base de l'objet en cours d'alignement.

Source W3C

Malheureusement, bien que ce soit la manière "correcte" d'atteindre ce que vous recherchez, il semblerait que Firefox n'a pas implémenté beaucoup d'attributs de présentation pour le module de texte SVG ( documentation MDN 'SVG dans Firefox' )

Simon West
la source
Je n'ai pas eu de chance avec ça. Pourriez-vous fournir un exemple?
SeMeKh
2
A mon avis, la meilleure réponse, car elle a répondu à la mienne sans avoir à naviguer vers une page de mur de texte.Je voulais afficher mon texte à y = 0, mais il était hors écran, j'ai donc utilisé une règle CSS "alignement- baseline: hang ", et il a fait exactement ce que je recherchais, du texte au point le plus élevé du conteneur SVG, sans qu'un seul pixel soit hors écran.
R. Hill
1
@SeMeKh: Hmm d'ailleurs, cela a fonctionné pour moi sur Chromium, mais maintenant je viens de vérifier que la même chose ne fonctionne pas sur Firefox. Il semble donc que cette propriété n'est pas prise en charge de manière cohérente dans les navigateurs pour le moment.
R. Hill
2
@ R.Hill Voici le rapport de bogue pour Firefox qui a été ouvert il y a plus de 11 ans bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: Quelle est la différence entre 'middle' et 'central'?
mxmlnkn
9
J'ai voté par erreur et parce que j'ai déjà fait la même erreur, je ne peux pas l'annuler. ☹ alignment-baseline: centralne fonctionne pas pour les SVG dans FireFox, et cela semble être intentionnel. dominant-baseline: centralfonctionne dans tous les navigateurs que j'ai essayés jusqu'à présent, comme indiqué dans cette réponse: stackoverflow.com/a/15997503/1450294
Michael Scheper
227

Selon les spécifications SVG, alignment-baselineapplique uniquement <tspan>, <textPath>, <tref>et <altGlyph>. Je crois comprendre qu'il est utilisé pour compenser ceux de l' <text>objet au-dessus d'eux. Je pense que ce que vous recherchez est dominant-baseline.

Les valeurs possibles de dominant-baselinesont:

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

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

toutankh
la source
8
Cela a résolu mes problèmes avec Firefox (qui ne fonctionnait pas avec la propriété "alignement-baseline"). La "ligne de base dominante" fonctionne sur Chrome et Firefox. Merci!
Mariano Desanze
5
Sauf que cela ne fonctionne dans aucune version d'IE à ce stade, donc ce n'est vraiment pas très utile pour de nombreuses applications du monde réel, malheureusement.
Yona Appletree
3
Comme IE ne prend en charge ni la ligne de base dominante, ni la ligne de base d'alignement, vous pouvez vérifier la prise en charge de la fonctionnalité de cette manière element.hasAttribute('dominant-baseline'), et si elle renvoie false, appliquez dy=-0.4emcomme indiqué dans cette réponse stackoverflow.com/a/29089222/2296470
Tigran
1
dominante-baseline: central a fonctionné dans mon cas. Merci!
Liam Mitchell
1
sachez que la ligne de base dominante n'est pas prise en charge par IE10-12 et Edge16
japrescott
47

attr ("ligne de base dominante", "central")

user1087079
la source
1
Cela s'aligne par le centre du caractère (autant que les glyphes de police jouent bien), je ne sais pas en quoi c'est une réponse ici à cette question.
matanster
3
Il s'agit de la méthode d3 ou jquery d'attribution des attributs
glyphe
1
Cette solution place la ligne de base au centre vertical du texte. La coordonnée y est donc au centre vertical. C'était la réponse que je cherchais. Merci.
Henry
1
Le cœur de la réponse est correct - définissez l'attribut dominant-baseline sur central, cependant attr () n'est pas une fonction JS native et il n'y a aucune explication.
jave.web
30

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

Le moyen le plus efficace de centrer du 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>

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

pourquoi
la source
5
Merci d'avoir la seule réponse qui fonctionne dans IE. C'est dommage que nous devions le faire, mais les autres réponses m'ont fait perdre beaucoup de temps à tout faire fonctionner dans Chrome / FF, puis à constater que cela ne fonctionne pas dans IE lors des tests du navigateur.
Yona Appletree
Décision agréable et simple! Et nous devons nous rappeler de supprimer l'attribut "align-baseline" pour omettre son influence sur la position du texte dans les navigateurs qui le supportent.
YaTaras
7

Après avoir examiné la recommandation SVG, j'ai compris que les propriétés de base sont destinées à positionner le texte par rapport à d'autres textes, en particulier lors du mélange de différentes polices et / ou langues. Si vous souhaitez afficher le texte de manière à ce qu'il soit en haut, yvous devez l'utiliser dy = "y + the height of your text".

rjax
la source
Appréciez le lien vers les spécifications, quelques lectures vraiment utiles. Je ne connaissais pas l' "<list-of-lengths>"option (liée) par exemple (permet la manipulation par caractère)
brichins