css - SVG 的宽度/高度属性的单位

Question

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

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

蓝色矩形大小因视口(viewport)而异。我假设 width 属性的单位 50 不仅仅是普通像素。否则它在不同的屏幕上会是一样的。

那么这个单位到底是什么意思呢？

Answer 1

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

---

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

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

svg 大小应该是其中包含的所有内容的最大范围。如果其中只有一个矩形，那么您可以将包含的 svg 设置为您想要的大小，只需在矩形上使用高度/宽度 100%。

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