SVG文本元素未正确定位

debugcn 发表于 Dev

爱德华·卢卡（Eduard Luca）

我给自己定了什么，我有一个最低限度的例子在这里。我需要将text元素放置在SVG的顶部。但是，如果您检查text元素，您会发现它实际上是从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>

知道为什么会这样吗？

r3mainer

根据SVG规范，占主导地位的基线hanging仅对像Devanagari这样的印度文字有意义。如果要使文本框的顶部边缘与特定的Y坐标对齐，请text-before-edge改用：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。