如何动态调整 SVG ClipPath 尺寸以匹配容器宽度？-css教程-PHP中文网

如何动态调整 SVG ClipPath 尺寸以匹配容器宽度？

Susan Sarandon

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

原创

495 人浏览过

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：