SVG dominant-baseline not working in Safari

Question

I'm trying to position SVG text so that it site entirely above the y-location at which it is located. A dominant baseline of text-after-edge appears to be the appropriate setting for this.

This works just fine in Chrome, but with Safari text-after-edge renders with the text centred around the y-location.

I explored further, as seen in this codepen:

https://codepen.io/anon/pen/obrreb?editors=1010

Here is the output in Chrome:

And in Safari:

As you can see a number of the dominant baseline renderings differ.

Answer 1

Jakob's suggestion to use dy is the simplest and most reliable solution. I would also suggest you use values defined in em units.

1em is the height of the font glyph from the bottom of the lowest descender to the top of the highest ascender or accent.

Descenders are typically around a quarter of an em. So to raise the text above the line use dy="-0.25em". Correspondingly, to hang below the line, use dy="0.75". See the example below.

<svg width="100%" height="200">
  <line y1="100" x2="100%" y2="100" stroke="grey"/>
  <text x="20" y="100" font="Arial, sans-serif" font-size="40">
    <tspan>Hanging</tspan>
    <tspan y="100" dy="-0.25em">Hanging</tspan>
    <tspan y="100" dy="0.75em">Hanging</tspan>
  </text>
</svg>

The main advantage to using em units is that they are independent of the font size. So you can tweak the value to suit your font exactly, and those em values will automatically work for any font size you specify.