如何使內嵌 SVG 與其父容器按比例縮放？

與父容器按比例縮放內聯SVG

讓內聯SVG 與其父容器成比例縮放是動態調整SVG 大小的便捷方法內容。當您需要在 HTML 元素中嵌入 SVG 圖形並確保它們適當縮放時，這是理想的選擇。實現此目的的方法如下：

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

在此範例中，SVG 元素的寬度為 100，高度為 50，如 viewBox 屬性所定義。 Polygon 元素表示跨越 SVG 整個寬度和高度的三角形。

viewBox 屬性指定 SVG 內容的座標。在本例中，水平座標範圍為 0 到 100，垂直座標範圍為 0 到 50。即使您使用 CSS 調整 SVG 元素的大小，三角形也將始終填滿整個 viewBox 區域。

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

透過設定 SVG 元素的寬度，我們可以指定包含元素的所需大小。高度將自動調整以保持 SVG 的縱橫比，確保三角形保持按比例縮放。

這種方法可讓您將 SVG 嵌入 HTML 元素並動態控制其大小，而無需使用外部檔案或犧牲樣式選項。

以上是如何使內嵌 SVG 與其父容器按比例縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！