单位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>