如何实现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) views20812 comments1

发送私信

最新评论

iefreer 2016-06-08 16:45:21

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


请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本

    有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...