根据视口调整大小的 Svg 剪辑路径
Svg clip path resizing according to viewport
我正在努力调整 HTML 设置中剪裁的 svg 的大小。我寻找类似的解决方案,但我还找不到。我正在尝试根据垂直屏幕视口调整剪切的 svg 的大小。这是我的设置的代码笔示例:
.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>
在这种情况下,解决方案是使用 clipPathUnits="objectBoundingBox"
clipPathUnits
属性指示用于 <clipPath>
元素内容的坐标系。
objectBoundingBox
表示 <clipPath>
元素内的所有坐标都相对于应用剪切路径的元素的边界框。表示坐标系原点为物体边界框的左上角,物体边界框的宽高被认为是1个单位值的长度。
由于对象边界框被认为具有 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>
我正在努力调整 HTML 设置中剪裁的 svg 的大小。我寻找类似的解决方案,但我还找不到。我正在尝试根据垂直屏幕视口调整剪切的 svg 的大小。这是我的设置的代码笔示例:
.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>
在这种情况下,解决方案是使用 clipPathUnits="objectBoundingBox"
clipPathUnits
属性指示用于 <clipPath>
元素内容的坐标系。
objectBoundingBox
表示 <clipPath>
元素内的所有坐标都相对于应用剪切路径的元素的边界框。表示坐标系原点为物体边界框的左上角,物体边界框的宽高被认为是1个单位值的长度。
由于对象边界框被认为具有 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>