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!
This question is related to
svg
vertical-alignment
w3c
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".
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.
attr("dominant-baseline", "central")
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:
auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
Check the W3C recommendation for the dominant-baseline property for more information about each possible value.
Source: Stackoverflow.com