如何使用'viewBox”、'width”和'height”縮放內聯 SVG 以適合其父容器？

使用父容器縮放內嵌 SVG

使用內聯 SVG（可縮放向量圖）元素時，經常需要縮放 SVG 以符合它的父容器。雖然可以透過引用外部 SVG 檔案來實現縮放，但這種方法可能會限制使用 CSS 設定 SVG 樣式的能力。因此，更理想的解決方案是直接縮放內聯 SVG。

使用viewBox 定義影像座標並使用寬度/高度縮放

定義SVG 影像的內部座標並確定其縮放方式，使用下列屬性：

• viewBox：定義影像在其自身座標系中的邊界框。
• 寬度：SVG 相對於包含頁面的寬度（單位為單位）。
• 高度：SVG 相對於包含頁面的高度（單位）。

例如，請考慮以下內容帶有紅色三角形的內聯SVG：

<svg width="10" height="20">
    <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

這裡，我們有：

• viewBox (0 , 0, 20, 10)：指定SVG 有一個矩形邊界框寬度為20 個單位，高度為10 個單位。
• width (10)：指定SVG 相對於包含頁的寬度應為 10 個單位。
• 高度 (20)：指定 SVG 相對於包含頁數的高度應為 20 個單位。

此 SVG 將渲染為 10 像素寬、20 像素高的紅色三角形。

以上是如何使用'viewBox”、'width”和'height”縮放內聯 SVG 以適合其父容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！