首页 >web前端 >css教程 >如何调整 SVG 剪辑路径的大小以匹配包含元素的宽度?

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

Linda Hamilton
Linda Hamilton原创
2024-12-14 19:57:11804浏览

How to Resize an SVG Clip Path to Match the Containing Element's Width?

如何调整 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn