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

Jakob 建议使用 dy是最简单、最可靠的解决方案。我还建议您使用 em 中定义的值单位。
1em是字体字形的高度，从最低下降部的底部到最高上升部或重音符号的顶部。

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

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

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