svg的宽度/高度属性单位

Question

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

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

蓝色矩形的大小取决于视口。 所以我假设50属性的单位width不仅仅是普通像素。否则它会在不同的屏幕上相同。

那么这个单位究竟是什么含义？

Answer 1

计量单位为pixels。由于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>