微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决SVG文本坐标的单位是什么?

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。