clipPathUnits 属性用来指定<clipPath>元素内容的坐标系,有2种取值:
clipPathUnits = "userSpaceOnUse | objectBoundingBox"
clipPathUnits = "userSpaceOnUse | objectBoundingBox"
userSpaceOnUse表示当前网页所使用的屏幕坐标系
objectBoundingBox则把坐标空间的原点调整到被裁剪对象的左上角,坐标空间的长宽设定为该元素的长宽
通常工具生成的svg路径,都是基于userSpaceOnUse的,并且还可能带一些变换(如位移和缩放)
<g transform="translate(0.000000,126.000000) scale(0.100000,-0.100000)"><clipPath>
而在CSS3直接引用clipPath时,不会自动去处理这些变换,需要我们自己来处理,直接引用进行裁切是达不到效果的
.element { clip-path: url(#svgClipPathID); }
需要将基于userSpaceOnUse的路径,转换为基于objectBoundingBox的路径,即将 绝对路径 转换为 相对路径
做法是把path数据转换成百分比或小数(小数更短一些,含义相同,都是相对单位),然后给clipPath添加clipPathUnits="objectBoundingBox"属性来自适应
<svg width="0" height="0"> <defs> <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> <!-- your paths here --> </clipPath> </defs> </svg>
转换可以使用此 工具
标签:clipPathUnits,svg,userSpaceOnUse,相对路径,objectBoundingBox,clipPath From: https://www.cnblogs.com/mengff/p/17495633.html