HTML5之SVG 2D新手入门9—蒙板及mask元素详细介绍与

SVG适用的蒙板

SVG适用多种多样蒙板殊效，应用这些特点，大家能够做出许多很炫的实际效果。至于汉语中把mask叫做"蒙板"還是"遮罩"就不去区别了，这里都叫做蒙板吧。

SVG适用的蒙板种类：
  1. 剪裁相对路径(cliping path)

剪裁相对路径是由path, text或基础图型构成的图型。全部在剪裁相对路径内的图型都可以见，全部在剪裁相对路径外的图型都不能见。
  2. 遮罩/蒙板(mask)

蒙板是1种器皿，它界定了1组图型并将它们做为半全透明的媒体，能够用来组成市场前景目标和情况。
剪裁相对路径和别的的蒙板1个关键的差别便是：剪裁相对路径是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些不一样的解决全过程：
  1.overflow特性针对除建立新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都沒有实际效果。
  2.剪裁相对路径与视窗是对应的，建立了新的视窗，就建立了新的剪裁相对路径。默认设置的剪裁相对路径便是视窗界限。
clip = <shape> | auto | inherit
clip特性用于设定当今视窗的剪裁相对路径。

这个特性能够用于能建立新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个特性和CSS2中同名特性有1样的主要参数。auto意味着剪裁相对路径与视窗边框是1致的。当应用图型做为主要参数时(设定剪裁矩形框的top,right,bottom和left的值)， 可使用客户座标值(即不带企业的座标)。比如：

目标的剪裁相对路径 - clipPath元素
剪裁相对路径应用clipPath元素界定，随后应用clip-path特性引入。
clipPath能够包括path元素，text元素，基础的图型元素(circle等)和use元素。假如是use元素，则它务必是立即引入path,text或基础图型元素，不可以引入的是别的的元素。
留意剪裁相对路径只是1位的遮罩层，该相对路径是包括的全部的元素的并集。在这个结合中的目标便可以显示信息，不在这个范畴内的目标就无法显示。实际判断点在不在范畴内的优化算法由"clip-rule"特性特定。

针对图型目标，剪裁相对路径等于自身clip-path设定的剪裁相对路径与全部外层元素的剪裁相对路径(包含clip-path和overflow设定的剪裁相对路径)的并集。留意几点：
  1.clipPath元素本身其实不会由外层连接点承继clipPath界定的剪裁相对路径。
  2.clipPath元素本身能够设定clip-path特性。实际效果是两个相对路径的相交。
  3.clipPath元素的子元素能够设定clip-path特性：实际效果是两个相对路径的并集。
  4.空剪裁相对路径会裁去元素内全部的內容。
下面看看几种关键的特性：
clipPathUnits = "userSpaceOnUse(默认设置值) | objectBoundingBox"
这个特性界定了clipPath元素应用的座标系统软件，这两个值大家都很熟习了，各自是选用引入当今剪裁相对路径的元素的客户座标系统软件和包围着盒占比值。
clipPath元素几乎不立即3D渲染，全是根据clip-path被引入，因此设定clipPath元素的display特性沒有功效。
clip-path = “<url(#剪裁相对路径名)> | none inherit”
这个特性无需多说了，用于引入剪裁相对路径，这里必须留意的是，全部的器皿元素，基础图型元素和clipPath元素都可以以应用这个特性。
clip-rule = "nonzero(默认设置值) | evenodd | inherit"
这个特性用于明确哪些点是属于剪裁路劲內部的点。针对简易的封闭式图型，这个很好判断，可是针对繁杂的內部有洞的图型，就有差别了。这个特性的赋值与fill-rule的赋值含意是1样的：
  nonzero：这个值选用的优化算法是：从必须判断的点向随意方位发射线，随后测算图型与直线交点的处的走向；测算結果从0刚开始，每有1个交点处的直线是从左到右的，就加1；每有1个交点处的直线是从右到左的，就减1；这样测算完全部交点后，假如这个测算的結果不等于0，则该点在图型内，必须填充；假如该值等于0，则在图型外，不必须填充。看下面的示例：

  evenodd：这个值选用的优化算法是：从必须判断的点向随意方位发射线，随后测算图型与直线交点的个数，个数为单数则改点在图型内，必须填充；个数为偶数则点在图型外，不必须填充。看下图的示例：

clip-rule特性只能用于clipPath元素的內部图型元素。比如下面的设定是起功效的：

蒙板- mask元素
在SVG中，你能够为3D渲染的目标特定任何的图型元素或g元素做为蒙板，来将3D渲染目标组成到情况中。
蒙板用mask元素界定，应用蒙板的情况下只必须在目标的mask特性中引入蒙板便可以了。
 mask元素能够包括任何的图型元素和器皿元素(比如g)。
蒙板的实际效果实际上大伙儿也较为清晰，基础便是依据蒙板中每一个点的色调和全透明度测算出1个最后的全透明度，随后在3D渲染目标的情况下，在目标上面罩上这个带有不一样全透明度的蒙板层，反映出蒙板的遮挡实际效果。针对3D渲染目标来讲，仅有在蒙版内的一部分会依照蒙板上点的全透明度来3D渲染，不在蒙板内的一部分无法显示。看下面的事例：

大伙儿能够试着将上面mask元素中的rect元素的width改为500，你会看到Text的1一部分无法显示了，这便是由于那一部分早已超过蒙板的范畴了。这里实际上也看到了，上面的剪裁相对路径只但是是1种独特的蒙板(每一个点的全透明度要末是0，要末是1)。
蒙板的界定和应用早已详细介绍了，下面看几个关键的特性：
  maskUnits = "userSpaceOnUse | objectBoundingBox(默认设置值)"
界定了mask元素中座标(x,y)和长度(width,height)的座标系统软件：应用引入该蒙板的元素的客户座标系，或是应用相对引入蒙板的元素的包围着盒的相对性值。这个值的含意与前面章节中的企业含意是同样的。
  maskContentUnits = "userSpaceOnUse(默认设置值) | objectBoundingBox"
界定了mask元素中子元素的座标系统软件。
  x, y, width, height
界定了蒙板的部位和尺寸，在默认设置的objectBoundingBox座标下，默认设置值各自为⑴0%,⑴0%,120%,120%。

另外要留意：蒙板不容易立即3D渲染，只会在引入的地区起功效，因此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/