vertical alignment of text element in SVG

Question

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!

Answer 1

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.