如何动态调整 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>
<p><strong>说明：</strong> </p>
<ul>
<li>CSS .clipped-img 现在使用 mask 属性将 SVG 应用为遮罩。</li>
<li>SVG 的 viewBox 属性已设置为“0 0 207 167”以匹配剪切形状的尺寸。</li>
<li>通过指定不同div中img-container的宽度，可以轻松调整SVG蒙版和裁剪后的大小区域。</li>
</ul>
</div>

以上是如何动态调整 SVG ClipPath 尺寸以匹配容器宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！