SVG的宽度/高度属性单位是什么？

Question

给定这段svg代码，一个蓝色的矩形正在被绘制。

<svg>
  <rect width="50" height="200" style="fill:blue"/>
</svg>

蓝色矩形的大小取决于视口。我认为width属性的单位50不仅仅是像素。否则，它将在不同的屏幕上相同。那么，这个单位的确切含义是什么？

- LiranC

---

在上面的代码中，看起来是以像素为单位的宽度和高度。 - Praveen Kumar Purushothaman

Answer 1

测量单位是像素。由于SVG元素中矢量绘制的行为，您没有得到正确的结果。

---

如果在您的SVG上指定高度和宽度，您会发现矩形的行为符合预期。

<svg width="400" height="400">
  <rect width="50" height="200" style="fill:blue"/>
</svg>

< p > SVG 的大小应该是其中包含的所有内容的最大范围。 如果只有一个矩形在其中，则可以将包含 SVG 设为所需大小，然后仅在矩形上使用高度 / 宽度 100%。 < /p >

<svg width="50" height="200">
  <rect width="100%" height="100%" style="fill:blue"/>
</svg>

- DreamTeK