SVG支持多种蒙板，使用这些特性，可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。
SVG支持的蒙板类型：
- 裁剪路径(cliping path)裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。
- 遮罩/蒙板(mask)蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。
裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。如下图所示：
这篇文章先来讲讲遮罩这类型的蒙板，裁剪路径类型的蒙板放在下篇文章再来讲。
mask
蒙板与剪切路径类似，只不过是半透明的。蒙板通常用于将前台的对象组合到当前的后台。
mask 元素定义了一个蒙板。随后使用 mask 属性引用该蒙板。
蒙板的效果其实大家也比较清楚，基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度，然后在渲染对象的时候，在对象上面罩上这个带有不同透明度的蒙板层，体现出蒙板的遮挡效果。对于渲染对象来说，只有在蒙版内的部分会按照蒙板上点的透明度来渲染，不在蒙板内的部分不显示。
下面来看一个蒙版的实例：
为了更好的语义化组织代码，在SVG中一般会把蒙版定义在defs标签中：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
上面的代码中，我们定义了一个mask元素，它的内容是一个单一的rect元素，它填充了一个透明到白色的渐变。作为红色矩形继承mark内容的alpha值（透明度）的结果，所以我们看到一个从绿色到红色渐变的输出：
蒙板的定义和使用已经介绍了，下面看几个重要的属性：
-
maskUnits = "userSpaceOnUse | objectBoundingBox(默认值)"。定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统：使用引用该蒙板的元素的用户坐标系，或者是使用相对于引用蒙板的元素的包围盒的相对值。这个值的含义与前面章节中的单位含义是相同的。
-
maskContentUnits = "userSpaceOnUse(默认值) | objectBoundingBox"。定义了mask元素中子元素的坐标系统。
-
x, y, width, height。定义了蒙板的位置和大小，在默认的objectBoundingBox坐标下，默认值分别为-10%,-10%,120%,120%。
此外要注意：蒙板不会直接渲染，只会在引用的地方起作用，所以display,opacity等属性对于mask元素来说都是不起作用的。
参考文章：
