如何縮放內嵌 SVG 以適應其父容器，同時保持縱橫比？

縮放內聯 SVG 以適合父容器

內嵌 SVG 提供了將向量圖形直接添加到 HTML 文件的靈活性。然而，在保持縱橫比的同時縮放它們以匹配父容器的大小可能會帶來挑戰。以下是使用 viewBox 屬性實現此目的的方法：

為了製作內嵌 SVG 比例，我們在 SVG 元素上使用 viewBox 屬性。此屬性定義影像在其自身座標系內的邊界框。隨後，我們使用 width 和 height 屬性指定所需的寬度和高度，這些屬性相對於包含的頁面。

考慮以下範例，它顯示一個10 像素x 20 像素的三角形：

此SVG 將在給定容器內呈現為10 像素x 20 像素的三角形，無論其大小如何。 viewBox 屬性 (0 0 20 10) 定義影像的座標系，(0,0) 為左上角，(20,10) 為右下角。透過指定寬度和高度屬性（範例中未顯示），我們將影像縮放到相對於容器的所需大小，同時保持其縱橫比。

以上是如何縮放內嵌 SVG 以適應其父容器，同時保持縱橫比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！