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值将自动适用于您指定的任何字体大小。

Answer 2

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

\n\n

在尝试了dominant-baseline和baseline-shift属性后，却发现它们都不适用于我想要支持的所有浏览器，一所大学向我指出，您可以使用元素dy上的属性<text>来将其移动到字形之后已沿 a 定位<textPath>。

\n\n

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

\n\n

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

\n\n

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

\n