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