vertical alignment of text element in SVG

svg vertical-alignment w3c

Let's say I have the SVG file:

<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>

I want to somehow align the top of a and b. Actually, I want my positioning to be according to the roofline instead of baseline!

The only answer that works in IE: stackoverflow.com/a/29089222/9069356

Mariano Desanze

According to SVG spec, alignment-baseline only applies to <tspan>, <textPath>, <tref> and <altGlyph>. My understanding is that it is used to offset those from the <text> object above them. I think what you are looking for is dominant-baseline.

Possible values of dominant-baseline are:

Check the W3C recommendation for the dominant-baseline property for more information about each possible value.

This fixed my problems with Firefox (which was not working with the "alignment-baseline" property). The "dominant-baseline" works on Chrome & Firefox. Thanks!

Except that this doesn't work in any version of IE at this point, so it's really not that useful for many real-world applications, unfortunately.

Since IE doesn't support either dominant-baseline, or alignment-baseline, you can check support for the feature like so element.hasAttribute('dominant-baseline'), and if it returns false apply dy=-0.4em as outlined in this answer stackoverflow.com/a/29089222/2296470

dominant-baseline: central worked in my case. thanks!

be aware that dominant-baseline is not supported by IE10-12 and Edge16

Michael Currie

The alignment-baseline property is what you're looking for it can take the following values

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

Description from w3c

This property specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. That is, the position of "ideographic" alignment-point in the block-progression-direction is the position of the "ideographic" baseline in the baseline-table of the object being aligned.

W3C Source

Unfortunately, although this is the "correct" way of achieving what you're after it would appear Firefox have not implemented a lot of the presentation attributes for the SVG Text Module ('SVG in Firefox' MDN Documentation)

Had no luck with that. Could you provide an example?

In my opinion the best answer, as it answered mine without having to navigate to a wall-of-text page.I wanted to display my text at y = 0, but it was off screen, so I used a CSS rule "alignment-baseline: hanging", and it did exactly what I was looking for, text at highest point in the SVG container, without a single pixel being offscreen.

@SeMeKh: Hmm incidentally, it worked for me on Chromium, but now I just verified that the same doesn't not work on Firefox. So it appears this property is not supported consistently across browsers as of now.

@R.Hill Here is the bugreport for firefox which was opened over 11 years ago bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: What is the difference between 'middle' and 'central'?

Upvoted by mistake, and because I've made the same mistake before, I can't undo it. ☹ alignment-baseline: central does not work for SVGs in FireFox, and that seems to be by design. dominant-baseline: central works in every browser I've tried so far, as indicated in this answer: stackoverflow.com/a/15997503/1450294

user1087079

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

This aligns by the center of the character (as much as the font glyphs play nicely), not sure how this is an answer here to this question.

This is d3 or jquery method of assigning attributes

This solution puts the baseline in the vertical centre of the text. So the y coordinate is at the vertical centre. This was the answer I was looking for. Thanks.

The core of the answer is correct - set dominant-baseline attribute to central, however attr() is not a native JS function and there is no explanation at all.

The question was asking for a "rooflike" alignment, not "central". I assume the correct dominant-baseline value that actually answers the original question is hanging.

whyoz

If you're testing this in IE, dominant-baseline and alignment-baseline are not supported.

The most effective way to center text in IE is to use something like this with "dy":

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

The negative value will shift it up and a positive value of dy will shift it down. I've found using -.4em seems a bit more centered vertically to me than -.5em, but you'll be the judge of that.

Thank you for having the only answer that works in IE. It's a shame we have to do this, but the other answers wasted me a significant amount of time getting everything working in Chrome/FF, then finding that it doesn't work in IE during browser testing.

Nice and simple decision! And we should remember to remove "alignment-baseline" attribute to omit its influence on the text position in browsers which support it.

brichins

After looking at the SVG Recommendation I've come to the understanding that the baseline properties are meant to position text relative to other text, especially when mixing different fonts and or languages. If you want to postion text so that it's top is at y then you need use dy = "y + the height of your text".

Appreciate the link to the spec, some really useful reading there. Wasn't aware of the (linked) "<list-of-lengths>" option for instance (allows per-character manipulation)

vertical alignment of text element in SVG

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US