SVG文本元素未正确定位

Question

我已经设置了一个极简主义的例子here。我需要将文本元素放在SVG的最顶层。但是，如果你检查文本元素，你会发现它实际上是从SVG之外的某个地方开始的（比如Chrome上的-3px，FF上的-4px） - 见下面的截图。我正在构建一些需要像素完美的东西，所以我需要让文本准确地从SVG开始的地方开始。正如您所看到的，rect从它应该开始的地方开始。

由于SO不允许我在帖子中发布没有代码的jsfiddle链接，这里是代码：

<svg width="100%" height="360" style="background-color: rgb(0, 249, 253);margin-top: 50px;">
  <rect y1="0" y2="100" x="0" width="100" height="100"></rect>
  <text x="100" y="0" dominant-baseline="hanging">2022</text>
</svg>

知道为什么会这样吗？

Answer 1

根据SVG specification，hanging的显性基线仅对像梵文这样的印度语脚本有意义。如果您希望文本框的上边缘与特定的Y坐标对齐，请改为使用text-before-edge：

＆＃13;

＆＃13;

<svg width="300" height="55" viewBox="0 0 300 55">
  <rect x="20" y="5" width="30" height="30" fill="#f00"/>
  <text x="50" y="5" dominant-baseline="hanging">8888</text>
  <text x="35" y="50" text-anchor="middle">hanging</text>
  <rect x="220" y="5" width="30" height="30" fill="#f00"/>
  <text x="250" y="5" dominant-baseline="text-before-edge">8888</text>
  <text x="235" y="50" text-anchor="middle">text-before-edge</text>
</svg>

＆＃13;

＆＃13;

＆＃13;