SVG基线在Safari中不起作用

我试图定位SVG文本，使其完全位于其所在的y位置之上。边缘后的

文本的主要基线

似乎是这方面的适当设置

这在Chrome中效果很好，但在Safari

边缘后的文本

中，文本以y位置为中心进行渲染

我进一步探索，如本代码笔所示：

以下是Chrome中的输出：

在狩猎中：

---

正如您所看到的，许多主要的基线渲染不同。

我最近遇到了相同的问题，并找到了一个在我的案例中有效的解决方案：

在尝试了

主基线

和

基线移位

属性后，发现它们在我打算支持的所有浏览器中都不起作用，一所大学向我指出，在字形沿着

放置后，可以使用

元素上的

dy

属性来移动它

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

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

{text}

---

请注意，这取决于必须知道或独立计算的

shiftText

值的知识。如果没有给出这一点，我认为唯一的前进之路是在区分所使用的浏览器时，结合使用

主导基线

和

基线移位

。

Jakob建议使用

dy

，这是最简单、最可靠的解决方案。我还建议您使用

em

单位中定义的值

1em

是字体图示符从最低的下行字母底部到最高的上行字母或重音字母顶部的高度

下行字符通常约为em的四分之一。因此，要将文本提升到行上方，请使用

dy=“-0.25em”

。相应地，要悬挂在线下，请使用

dy=“0.75”

。请参见下面的示例

绞刑
绞刑
绞刑

边后文字和边前文字已经使用过，不应使用。@RobertLongson该注释位于对齐基线下，而不是主基线下。您知道它也适用于主导基线吗？