如何使用內嵌 SVG 建立響應式剪輯路徑？

具有內聯SVG 的響應式剪輯路徑

當使用SVG 為具有背景的元素建立剪輯路徑時，重要的是了解viewBox 和keepAspectRatio 的工作原理。 viewBox 屬性定義 SVG 內容的尺寸，而preserveAspectRatio 則決定內容如何縮放和適合元素。

在程式碼片段中，您將剪輯路徑應用到帶有高度為100px：

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}</code>

但是，您的SVG 的viewBox 為“0 0 4000 1696”，這意味著應用的剪輯路徑寬度為4000px。這可能比標題元素的實際寬度大得多，這就是為什麼您看不到所需效果的原因。

要建立響應式剪輯路徑，您需要定義 SVG 的 viewBox 以符合所套用元素的尺寸。您也可以使用 ClipPathUnits 屬性來指定以相對於元素邊界框的單位定義路徑：

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}

#myClip {
  clipPathUnits: objectBoundingBox;
}</code>

透過這些更改，SVG 將縮放以適合標題的尺寸元素，並且剪輯路徑將被正確應用。

以上是如何使用內嵌 SVG 建立響應式剪輯路徑？的詳細內容。更多資訊請關注PHP中文網其他相關文章！