SVG dominant base layer does not work in Safari

Question

I am trying to arrange the SVG text so that it is completely above the location y in which it is located. The dominant text-after-edge database seems to be the appropriate setting for this.

This works fine in Chrome, but with Safari, text-after-edge displayed with text centered around the y-location.

I investigated further, as can be seen from this codef:

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

Here is the result in Chrome:

And in Safari:

As you can see, some dominant baseline visualizations are different.

Answer 1

The Jacobian proposal to use dy is the simplest and most reliable solution. I would also suggest using values ​​defined in em units.

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

Descenders usually make up about a quarter of them. Therefore, to raise the text above the line, use dy="-0.25em" . Accordingly, to hang under 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 of using em modules is that they are independent of font size. That way, you can fine-tune the value that matches your font, and these em values ​​will automatically work for any font size you specify.

Answer 2

I recently ran into the same problem and found a solution that worked in my case:

After using the dominant-baseline and baseline-shift properties just to find out that both of them do not work in all the browsers I am going to support, college pointed out to me that you can use the dy attribute on the <text> element to shift it after the glyphs were located along the <textPath> .

Here are a few pseudo-codes / jsx to illustrate my solution:

 <g {...}> <path id={textPathId} fill="none" transform={…} d={…} /> <text textAnchor="middle" fill={textFill} dy={shiftText} > <textPath xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#${textPathId}`} startOffset="50%" > {text} </textPath> </text> </g> 

Note that this depends on knowing the value of shiftText , which must be known or calculated independently. If this is not indicated, I think the only way forward is to use a combination of dominant-baseline and baseline-shift to distinguish between browsers used.