根据视口调整 Svg 剪辑路径的大小答案

【问题标题】：Svg clip path resizing according to viewport根据视口调整 Svg 剪辑路径的大小
【发布时间】：2021-04-04 00:40:01
【问题描述】：

我正在努力调整我的 HTML 设置中剪辑的 svg 的大小。我寻找了类似的解决方案，但我还没有找到任何解决方案。我正在尝试根据垂直屏幕视口调整剪辑的 svg 大小。这是我设置的 codepen 示例：

.slider-image {
  clip-path: url(#clip);
  -webkit-clip-path: url(#clip);
}

<div>
  <img class="w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
  <svg width="100%" height="90vh" viewBox="0 0 1159 548" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clip">
        <path d="M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill="url(#paint0_linear)"/>
        <circle cx="350" cy="168" r="80"/>
      </clipPath>
    </defs>
  </svg>                
</div>

https://codepen.io/ilkrclm/pen/oNNMQor?editors=1100

【问题讨论】：

标签： svg clip-path

【解决方案1】：

在这种情况下，解决方案是使用clipPathUnits="objectBoundingBox"

clipPathUnits 属性表示<clipPath> 元素的内容使用哪个坐标系。

objectBoundingBox 表示<clipPath> 元素内的所有坐标都相对于应用剪切路径的元素的边界框。即坐标系的原点是物体边界框的左上角，物体边界框的宽度和高度被认为是长度为1个单位的值。

了解clipPathUnits

由于对象边界框的长度被认为是 1 个单位，因此您需要缩放路径：transform="scale(0.00086)"。路径边界框的宽度为 1159。1/1159 = 0.00086。

我已经注释掉了这个圆圈，因为在这种情况下没有做任何事情。

*{margin:0;padding:0}
.slider-image {
  width:100%;
  clip-path: url(#clip);
  -webkit-clip-path: url(#clip);
}

<div>
  <img class="w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.00086)" d="M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill="url(#paint0_linear)"/>
        <!--<circle transform="scale(0.00086)" cx="350" cy="168" r="80"/>-->
      </clipPath>
    </defs>
  </svg>                
</div>

【讨论】：

感谢您提供有关该解决方案的详细信息。非常感激。对于垂直缩放，我将变换修改为“scale(0.00086, 0.001824)”。它现在就像一个魅力。