<mask id=”Mask” maskUnits=”userSpaceOnUse”
x=”0″ y=”0″ width=”800″ height=”300″>
<rect x=”0″ y=”0″ width=”800″ height=”300″ fill=”url(#Gradient)” />
</mask>
<text id=”Text” x=”400″ y=”200″
font-family=”Verdana” font-size=”100″ text-anchor=”middle” >
Masked text
</text>
</defs>
<!– 视窗的背景 –>
<rect x=”0″ y=”0″ width=”800″ height=”300″ fill=”#FF8080″ />
<!– 第一步绘制一个带有蒙板的Text，可以看到蒙板的透明度效果已经应用到字上了.
第二步是绘制一个不带蒙板的Text，来作为第一步Text的轮廓 –>
<use xlink:href=”#Text” fill=”blue” mask=”url(#Mask)” />
<use xlink:href=”#Text” fill=”none” stroke=”black” stroke-width=”2″ />
</svg>
效果如下图所示：
大家可以试着将上面mask元素中的rect元素的width改成500，你会看到Text的一部分不显示了，这就是因为那部分已经超出蒙板的范围了。这里其实也看到了，上面的裁剪路径只不过是一种特殊的蒙板(每个点的透明度要么是0，要么是1)。
蒙板的定义和使用已经介绍了，下面看几个重要的属性：
maskUnits = "userSpaceOnUse | objectBoundingBox(默认值)"
定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统：使用引用该蒙板的元素的用户坐标系，或者是使用相对于引用蒙板的元素的包围盒的相对值。这个值的含义与前面章节中的单位含义是相同的。
maskContentUnits = "userSpaceOnUse(默认值) | objectBoundingBox"
定义了mask元素中子元素的坐标系统。
x, y, width, height
定义了蒙板的位置和大小，在默认的objectBoundingBox坐标下，默认值分别为-10%,-10%,120%,120%。
此外要注意：蒙板不会直接渲染，只会在引用的地方起作用，所以display,opacity等属性对于mask元素来说都是不起作用的。
实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
