526互联

svg clipPath的clipPathUnits和相对路径转换

发布时间 2023-06-21 10:41:05作者: 看风景就

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>

转换可以使用此 工具 

 

参考: 如何实现SVG clipPath自适应被裁剪对象