如何動態調整 SVG ClipPath 尺寸以符合容器寬度？

如何自訂 SVG ClipPath 尺寸

本文提供了一個動態調整 SVG 定義的 ClipPath 區域大小的解決方案。透過利用 SVG 作為遮罩，您可以輕鬆操縱其尺寸和位置。

理解問題

在提供的程式碼片段中，一個帶有綠色的矩形容器背景有一個剪裁的 SVG 圖像。目標是增加剪切形狀的尺寸以匹配綠色區域的寬度。

解決方案：使用 SVG 作為遮罩

達到所需效果效果，SVG 可以用作剪切影像的遮罩。透過正確設定SVG的viewBox屬性，可以控制它的大小和位置。這是該版本的更新版本代碼：

CSS：

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
}

HTML：

<div>

HTML：

說明： CSS .clipped-img 現在使用 mask 屬性將 SVG 應用為遮罩。 SVG 的 viewBox 屬性已設定為「0 0 207 167」以符合剪切形狀的尺寸。 透過指定不同div中img-container的寬度，可以輕鬆調整SVG蒙版和裁剪後的大小區域。

以上是如何動態調整 SVG ClipPath 尺寸以符合容器寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！