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

iefreer 发表于 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(2) negative(0) views10301 comments1
私信 收藏 分享
分享到

发送私信

最新评论

iefreer 2016-06-08 16:45:21

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


请先 登录 再评论.
相关文章
  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • A-Frame WebVR(网页虚拟现实)快速开发入门教程

    WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

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

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

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...