SVG文本坐标的单位是什么？

编程问答 2022-05-30

问题描述

大家好。有人可以解释一下 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">

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

解决方法

每 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;">

coordinate-systemscoordinatescoordinatessvgsvgsvg