如何調整 SVG 剪輯路徑的大小以符合包含元素的寬度？-css教學-PHP中文網

如何調整 SVG 剪輯路徑的大小以符合包含元素的寬度？

Linda Hamilton

發布： 2024-12-14 19:57:11

原創

803 人瀏覽過

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中文網其他相關文章！