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

techbrood 发表于 2016-06-08 10:49:28

标签: svg, css3, clippath

- +

CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。

clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁剪成我们想要的形状。

blob.png

clip-path支持多种方式,如基本的图形(多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()),也支持直接引用SVG中的clipPath元素。通常简单的裁剪,我们直接使用基本图形,或者使用在线工具辅助生成,我们推荐使用:

http://techbrood.com/css-clip-path

来生成一些简单的裁剪路径,代码如下:

/* Using a CSS basic shape function */
.element {
    clip-path: polygon(...); /* or one of the other shape functions */
}

对于更为复杂的裁剪,使用SVG无疑是更好的选择,我们可以在AI或Inkscape中创作好矢量图,然后根据其路径(path)数据生成相应的clipPath元素,然后在CSS3中直接引用,代码如下:

/* Referencing an SVG clipPath */
.element {
    clip-path: url(#svgClipPathID);
}

但是在使用SVG clipPath元素时,经常会遇到单位不匹配的情况,因为通常通过工具生成的g元素,会应用一些变换(如位移和缩放):

<g transform="translate(0.000000,126.000000) scale(0.100000,-0.100000)"><clipPath>your paths here</clipPath></g>

而在CSS3直接引用clipPath时,不会自动去处理这些变换,需要我们自己来处理,

把path数据转换成百分比,然后给clipPath添加clipPathUnits="objectBoundingBox"属性来自适应:

<svg width="0" height="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <!-- your paths here -->
        </clipPath>
    </defs>
</svg>

clipPathUnits 属性用来指定<clipPath>元素内容的坐标系,有2种取值:

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

userSpaceOnUse表示当前网页所使用的屏幕坐标系,而objectBoundingBox则把坐标空间的原点调整到被裁剪对象的左上角,坐标空间的长宽设定为该元素的长宽。

possitive(12) views20810 comments1

发送私信

最新评论

iefreer 2016-06-08 16:45:21

Read svg clipping more on: https://sarasoueidan.com/blog/css-svg-clipping/


请先 登录 再评论.
相关文章