什么是单位 SVG 文本坐标？

Question

大家好。有人可以解释一下 Svg 文本坐标的单位是什么吗？我们如何将它们转换为像素？谢谢你。

编辑：

感谢 Robert 的回答；但是我在使用它时遇到了问题。这是我的代码：

<svg viewBox="0 0 1000 1000"> 

<text x="23.5625" y="195.98749542236328" fill="red" style="font-size: 60px">Hi</text>

</svg>

<input style="position: absolute; left: 23.5625px; top: 195.987px">

只需将页面设为全屏，然后尝试缩放。

Answer 1

每the SVG specification 省略的单位与像素相同。

一个 px 单位被定义为等于一个用户单位。因此，“5px”的长度与“5”的长度相同。

请注意，viewBox 应用了使 SVG 响应的变换。如果您想匹配绝对定位的输入，那么您不希望这样。此外，默认情况下，文本的基线是大多数字母的底部，如果我们使用悬挂作为基线，那么它将与输入匹配。

我还将输入不透明度设置为 0.5，因此您可以看到 SVG 现在位于输入元素下方。

html, body, svg {
  width: 100%;
  height: 100%;
}

<svg> 

<text x="23.5625" y="195.98749542236328" fill="red" style="font-size: 20px;dominant-baseline: hanging;">Hi</text>

</svg>

<input style="position: absolute; left: 23.5625px; top: 195.987px;opacity: 0.5;">