css3 clipPath使用svg自定义路径（自适应）

<style type="text/css">
.element {clip-path: url(#svgPath);object-fit: cover;width: 50%;border: 1px solid #ddd}
</style>
<div class="element"><img src="16740142425163.jpg" alt="" style="width: 100%"></div>	
<svg width="0" height="0" fill="none" >
	<clipPath id="svgPath" clipPathUnits="objectBoundingBox" transform="scale(0.000928 0.001805)">
		<path d="m0,7.61C3.72.81,9.66.03,16.84.08c39.97.25,79.94-.28,119.91.02,42.7.32,83.8,8.62,123.01,25.97,33.76,14.93,63.75,35.33,89.58,61.55,35.69,36.22,60.45,78.87,71.53,128.73,17.83,80.25,2.63,154.07-46.36,220.1-41.5,55.93-97.11,91.27-164.63,108.08-25.97,6.47-52.31,9.18-79.04,9.05-38.14-.19-76.28-.18-114.42.07-6.9.04-12.82-.6-16.43-7.27v-110.95c3.25-6.75,8.98-7.54,15.77-7.51,39.15.22,78.29.03,117.44.13,30.67.08,59.01-7.8,85.45-23.4,51.58-30.44,83.29-92.18,71.65-152.8-7.2-37.49-25.93-67.74-55.62-91.17-29.92-23.61-64.38-34.65-102.4-34.7-38.65-.05-77.3-.13-115.94.1-6.94.04-12.91-.61-16.35-7.51V7.61Z"/>
		<path d="m909.67,8.04c22.32,0,44.64-.02,66.95,0,11.98.02,15.58,5.79,9.61,16.27-15.24,26.72-30.83,53.24-46.19,79.89-13.86,24.05-27.54,48.21-41.41,72.26-20.02,34.73-40.14,69.39-60.19,104.1-12.71,22.02-25.32,44.09-38.05,66.1-24.64,42.61-49.34,85.19-73.99,127.79-10.89,18.83-21.68,37.72-32.61,56.53-3.48,5.99-6.69,12.28-11.09,17.54-2.23,2.66-6.78,4.46-10.4,4.69-10.12.64-20.3.27-30.46.29-35.14.06-70.28.13-105.41.16-1.99,0-4-.18-5.95-.52-6.58-1.17-9.53-5.48-6.75-11.46,3.98-8.57,8.72-16.81,13.44-25.01,19.82-34.45,39.72-68.86,59.67-103.24,16.19-27.89,32.59-55.66,48.72-83.58,20.12-34.84,40.03-69.81,60.08-104.7,20.13-35.01,40.31-70,60.52-104.97,19.56-33.84,39.2-67.63,58.76-101.47,4.1-7.1,9.85-10.77,18.3-10.69,22.15.2,44.3.07,66.45.07v-.04Z"/>
		<path d="m910.71,477.62c.26-44.79,32.56-79.09,74.56-82.18,34.6-2.55,62.28,9.81,80.25,39.71,21.11,35.12,11.66,78.09-21.17,102.71-39.88,29.9-98.46,18.29-123.4-24.53-6.92-11.88-10.48-24.76-10.25-35.71Z"/>
	</clipPath>
</svg>

使用关键两个点：

1.clipPathUnits="objectBoundingBox"

2.clipPath标签上面的transform

那么如何计算clipPath标签上面的transform？

将SVG路径数据转换为0-1范围，比如设计稿图片尺寸为300*200；那么我们拿到的矢量路径的svg的viewBox应该是"0 0 300 200"；（就是要保证svg的画布和要clip的图片尺寸相同或者比例相同）；

那么我们拿1分别除以图片宽高，就可得出scale在x和y方向的值即1/300和1/200（小数位数越多越精确，但是太精确可能导致图形溢出，裁切不完整，那么我们可以根据实际情况相应缩小得出来的小数即可）