如何縮放內嵌 SVG 以適合其父容器？

如何縮放內聯SVG 元素

在某些情況下，開發人員可能需要動態縮放內聯SVG 影像以符合它的父容器。這可以在不引用外部 SVG 檔案的情況下實現，並允許將其他 CSS 樣式應用到 SVG 的內容。

要縮放內聯SVG，請使用以下步驟：

1. 指定Viewbox 屬性：
   使用viewBox 屬性定義圖像在其座標系內的圖像邊界框在SVG 元素上。這些值代表 SVG 左上角和右下角的 x 和 y 座標。
2. 設定寬度和高度屬性：
   指定寬度和高度SVG 的外觀，因為它應該使用寬度和高度屬性出現在包含頁面中。這些值決定了 SVG 如何按比例縮放。

例如，以下程式碼將在10px x 20px 邊界框內渲染一個三角形，然後將其縮放以適合其父容器：

svg {
  border: 1px solid blue;
}

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

透過指定SVG 內的座標（與其縮放尺寸無關），圖像將保持其比例並正確渲染，無論其容器的大小如何尺寸。

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