如何使用其父容器製作內嵌 SVG 比例？

使用其父容器縮放內聯 SVG

將內聯 SVG 元素合併到 HTML 程式碼中提供了使用 CSS 對其進行樣式化的優勢。然而，縮放此類 SVG 元素以匹配其父容器的尺寸可能是一個挑戰。

解決方案

要使用其父容器縮放內聯SVG，它是需要將viewBox 屬性與寬度和高度屬性結合使用：

1. viewBox attribute: 此屬性定義SVG影像在其自身座標系內的邊界框。它決定 SVG 影像的縱橫比和初始尺寸。設定此屬性，您可以獨立於縮放後的大小來指定 SVG 影像內的座標。
2. 寬度和高度屬性： 這些屬性指定 SVG 元素在包含頁中。它們控制 SVG 圖像在頁面上顯示的大小。透過相對於容器的尺寸設定這些屬性（例如，使用百分比），您可以按比例縮放 SVG 映像。

例如，考慮以下程式碼：

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

在此範例中，原始大小為 123 像素 x 456 像素的 SVG 影像經過縮放以填充整個容器。 viewBox 屬性定義 SVG 映像本身內多邊形的座標，而 width 和 height 屬性則將 SVG 映像縮放到容器的尺寸。結果，多邊形在容器內呈現為 100% 寬的紅色三角形。

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