SVG占优势-基线在Safari中不起作用

Question

我试图定位SVG文本，使它的站点完全高于它所在的Y位置。text-after-edge的主要基线似乎是此设置的适当设置。

这在Chrome中工作得很好，但在Safari中，text-after-edge以Y位置为中心呈现文本。

我进一步探讨了这段代码：

正如您所看到的，一些主要的基线效果是不同的。

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>