如何動態調整 SVG ClipPath 尺寸以符合容器寬度？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-12-09 07:51:12

原創

492 人瀏覽過

How to Dynamically Adjust SVG ClipPath Dimensions to Match Container Width?

如何自訂 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：