SVG显性基线在Safari中不起作用

Question

我正在尝试定位SVG文本，使其完全位于它所在的y位置之上。 text-after-edge的显性基线似乎是适当的设置。

这在Chrome中运行得很好，但使用Safari text-after-edge进行渲染，文字以y位置为中心。

我进一步探索，如此代码中所示：

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

以下是Chrome中的输出：

在Safari中：

正如您所看到的，一些主要的基线渲染图会有所不同。

Answer 1

雅各布建议使用dy是最简单，最可靠的解决方案。我还建议您使用em单位中定义的值。

1em是从最低下降部分底部到最高上升或重音顶部的字体字形高度。

下降者通常约为四分之一。因此，要提高行上方的文本，请使用dy="-0.25em"。相应地，要悬挂在该线下方，请使用dy="0.75"。请参阅下面的示例。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用em单元的主要优点是它们与字体大小无关。因此，您可以精确调整值以适合您的字体，这些em值将自动适用于您指定的任何字体大小。

Answer 2

我最近遇到了同样的问题，并找到了一个适合我案例的解决方案：

在尝试baseline-shift和dy属性后，发现他们两个都不能在所有我希望支持的浏览器中工作，一所大学向我指出您可以使用<text>元素上的<textPath>属性在字形位于<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> 之后移动它。

这是一些伪代码/ jsx来说明我的解决方案：

shiftText

请注意，这取决于必须知道或独立计算的dominant-baseline值的知识。如果没有给出，我认为唯一的前进方向是使用baseline-shift和{{1}}的组合，同时区分所使用的浏览器。