HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

摘要：SVG支持的蒙板SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，...

SVG支持的蒙板

SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。

SVG支持的蒙板类型：

1. 裁剪路径(cliping path)

裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。

2. 遮罩/蒙板(mask)

蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。

裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

视窗的裁剪路径 - overflow和clip属性

HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的，在SVG中，这2个属性还可以使用。

overflow = visible | hidden | scroll | auto | inherit

overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。

这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下：

visible：显示所有内容，即使是内容已经在元素的边框外边，这个是默认值。

hidden：隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。

scroll：采用滚动条的形式，呈现超出的内容。

auto：采用浏览器定义的行为，这个似乎不太可靠。

这个属性和CSS2中的同名属性基本相同，只不过在SVG中，有一些不同的处理过程：

1.overflow属性对于除了创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都没有效果。

2.裁剪路径与视窗是对应的，创建了新的视窗，就创建了新的裁剪路径。默认的裁剪路径就是视窗边界。

clip = <shape> | auto | inherit

clip属性用于设置当前视窗的裁剪路径。

这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性和CSS2中同名属性有一样的参数。auto代表裁剪路径与视窗边框是一致的。当使用图形作为参数时(设置裁剪矩形的top,right,bottom和left的值)，可以使用用户坐标值(即不带单位的坐标)。例如：

P { clip: rect(5px, 10px, 10px, 5px); }

这里注意，默认情况下(overflow和clip都取默认值)，裁剪路径是与视窗的边框是一致的。当设置了viewBox和preserveAspectRatio以后，通常也需要把clip裁剪路径的四边映射成viewBox的四边，这样才能保证某些显示效果还是一样的(当然如果都是默认值，就不用设了)。

对象的裁剪路径 - clipPath元素

裁剪路径使用clipPath元素定义，然后使用clip-path属性引用。

clipPath可以包含path元素，text元素，基本的图形元素(circle等)和use元素。如果是use元素，则它必须是直接引用path,text或者基本图形元素，不能引用的是其他的元素。

注意裁剪路径只是一位的遮罩层，该路径是包含的所有的元素的并集。在这个集合中的对象就可以显示，不在这个范围内的对象就不显示。具体判定点在不在范围内的算法由"clip-rule"属性指定。

对于图形对象，裁剪路径等于自己clip-path设置的裁剪路径与所有外层元素的裁剪路径(包括clip-path和overflow设置的裁剪路径)的并集。注意几点：

1.clipPath元素自身并不会从外层节点继承clipPath定义的裁剪路径。

2.clipPath元素自身可以设置clip-path属性。效果是两个路径的交集。

3.clipPath元素的子元素可以设置clip-path属性：效果是两个路径的并集。

4.空裁剪路径会裁掉元素内所有的内容。

下面看看几种重要的属性：

clipPathUnits = "userSpaceOnUse(默认值) | objectBoundingBox"

这个属性定义了clipPath元素使用的坐标系统，这两个值我们都很熟悉了，分别是采用引用当前裁剪路径的元素的用户坐标系统和包围盒比例值。

clipPath元素从来不直接渲染，都是通过clip-path被引用，所以设置clipPath元素的display属性没有作用。

clip-path = “<url(#裁剪路径名)> | none inherit”

这个属性不用多说了，用于引用裁剪路径，这里需要注意的是，所有的容器元素，基本图形元素和clipPath元素都可以使用这个属性。

clip-rule = "nonzero(默认值) | evenodd | inherit"

这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形，这个很好判定，但是对于复杂的内部有洞的图形，就有区别了。这个属性的取值与fill-rule的取值含义是一样的：

nonzero：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充。看下面的示例：

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用1