如何调整 SVG 的 ClipPath 区域的大小？

Posted 2023-03-05

【中文标题】如何调整 SVG 的 ClipPath 区域的大小？

【英文标题】：How to resize the ClipPath area of SVG?

【发布时间】：2020-06-14 22:14:28

【问题描述】：

我有这样的代码：

.img-container 
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;


.clipped-img 
  clip-path: url('#header-clip-svg');

<div class="img-container">

  <!--clipping SVG-->
  <svg  >
    <defs>
      <clipPath id="header-clip-svg">
        <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>
      </clipPath>
    </defs>
  </svg>

  <!-- clipped image-->
  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
  
</div>

我想增加剪裁形状的尺寸，使其具有彩色绿色区域的宽度。有没有办法做到这一点？

【问题讨论】：

不更新 SVG。我注意到它没有viewbox，我会从那里开始。

@Paulie_D 你能用更新的 SVG 添加答案吗？

我无法重写 SVG，这是你必须做的事情。

@Paulie_D 你的意思是编辑路径，而不是属性？如果是，对不起，我不是要问路径编辑

【参考方案1】：

您可以将 SVG 应用为 mask 并轻松调整其大小和位置（就像使用 background-image 一样）。只需确保为 viewbox 设置正确的值：

.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;

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>

<div class="img-container" style="width:500px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>

<div class="img-container" style="width:150px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>

【讨论】：

在我的情况下 svg 代码会比动态更能做什么？我不能像你提供的解决方案那样放入 css。

@JigneshPanchal 你说的 dynamic 是什么意思？在所有情况下，您只需将 SVG 放在蒙版中，不管 SVG

***.com/questions/62409895/…

【参考方案2】：

.img-container 
  width: 300px;
  height: 300px;
  
  background-color: lightgreen;
  
  overflow: hidden;


.clipped-img 
  clip-path: url('#header-clip-svg');
      max-width: 100%;

<div class="img-container">

  <!--clipping SVG-->
  <svg  >
    <defs>
      <clipPath id="header-clip-svg">
        <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>
      </clipPath>
    </defs>
  </svg>
  <!-- clipped image-->
  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
  
</div>

【讨论】：

请解释您的答案代码的作用；它与 OP 有何不同，以及这种差异如何解决问题。仅代码的答案没有什么价值。