如何调整 SVG 剪辑路径的大小以匹配包含元素的宽度？

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

考虑以下场景：

.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 height="0" width="0">
    <defs>
      <clipPath>

目标是扩展剪裁形状的尺寸以匹配果岭的宽度

解决方案

使用 SVG 作为遮罩可以控制其大小和位置，类似于背景图像。通过为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, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}

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

<div class="img-container">

通过修改img-container的宽度，可以毫不费力地调整裁剪区域的大小。

以上是如何调整 SVG 剪辑路径的大小以匹配包含元素的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！