(翻译)Clipping in CSS and SVG ? The clip-path Property and Element_html/css_WEB-ITnose

css和svg有很多地方相似，今天我们的css就有很多地方是从svg来的，其中 一个就是clipping操作。css和svg都允许我们对元素进行clip操作，以使元素变成特定的不规则形状。

请注意，这篇文章的例子可能在你的浏览器上不会起作用。所以请查看这个兼容性报告。

What Is Clipping?

clipping是一种能够让你全部或局部隐藏元素图像的操作。被修剪的元素可以是任何容器或图像元素。元素显示的或隐藏的部分由clipping path决定。

比如效果

svg文件

注意，你需要自己改下图片的路径才能用。原来的路径是base64,太长了，我删了。

clipping path限定了一个区域，在这个区域内的图像就会被显示，而在之之外的就不会显示。这个区域被称之为clipping region。

更确切的说，任何在这区域外的元素部分都不会被渲染，包括内容content,背景，边框，文饰text decoration,outline和这个the clipping path所用的可见的滚动机制。

这些东西在后代元素中也不会被渲染。

Clipping In CSS ? The clip-path Property

clip-path是css遮罩模块（CSS Masking Module）的一部分，而clipping操作从2000年起就是svg的一部分了，而且clipping操作已经被纳入css遮罩模块中，以使我们在对html元素修剪(clip)的时候就和对svg元素的一样。

clip-path属性是用来指定将被应用到元素上的修剪路径，用clip-path,你可以指定SVG 中路径的属性值。

你还可以通过指定CSS Shapes module中的基本形状（basic shapes）来限定修剪路径。

这些形状可以用shape functions来创建，比如polygon(), circle(), inset()，ellipse()

用clip-path是修剪路径作用于元素是非常简单，直接的。

/* Referencing an SVG clipPath */.element {    clip-path: url(#svgClipPathID);} /* Using a CSS basic shape function */.element {    clip-path: polygon(...); /* or one of the other shape functions */}

比如，我们用polygon()来限定多边形的修剪路径，然后把它应用到图片上，代码如下：

img {    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);}

效果：live demo

基本的shape functions只能让我们创建有限数量的形状，这些形状中最复杂的是多边形。

如果你想创建更复杂的形状，可以用SVG 元素。SVG 可以让你创建任意随意的形状，然后将其用做修剪路径。

比如：

修剪路径：

我们将SVG 应用到图片上

img {    clip-path: url(#svgPath);}

效果：live demo

可以包含任意数量的基本形状（, , etc.），，甚至是。

在里用作修剪路径，最棒的一点是你可以指定text里的font-family.

我通过设置textLength,将text的宽度和图片的宽度设成一致.用中的x,y坐标来定位。

注意，这里的x,y坐标是以文字的左下角为原点的。

效果：live demo

下面,我让包含多个基本形状。

效果：live demo

（完）

如果是知道点flash的人都知道，这个就是flash里面的遮罩嘛。

qq空间里面的动感影集的图片的切换效果就用的遮罩。

那切换效果简直是相当的炫目，而且变化很多。qq空间里面的效果就有21种。

我随便放一个所谓的遮罩，大家就会瞬间秒懂。

这显然比用js的动画库的简单的多，更容易去做。

而上面讲的用svg去做不规则的遮罩，这个提供了一个新思路。你可以动态的改变svg，还有他的参数达到类似的动画效果。

另外,html5 的canvas也有类似的效果。用到了个很好的html5库easel js.

尼玛，他的官网经常上不去，不过github上的去 https://github.com/CreateJS/EaselJS

效果