在 HTML 中使用 'px' 作为内联 SVG 的单位

Question

我可以使用 px 作为内嵌 svg 图像的单位吗？例如，在下面的示例代码中使用 width="100px" 和 height="100px" 是否正确？

<svg width="100px" height="100px">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Answer 1

这是有效的 SVG。根据 MDN，width and height 属性都是 <length> 类型，定义如下：

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

长度单位标识符是可选的，但在 SVG 属性中是允许的。

Using 'px' as a unit on inline SVGs in HTML