遮罩

指令：mask()

参数：id, [x, y , width, height]

语法：mask(id, [x, y , width, height])

参数说明

① id - 必须，mask标签id标识符，字符型
② x - 可选，mask遮罩层左上角X坐标，缺省默认 -10% 或 -0.1
② y - 可选，mask遮罩层左上角Y坐标，缺省默认 -10% 或 -0.1
③ width - 可选，mask遮罩层宽度，缺省默认 120% 或 1.2
④ height - 可选，mask遮罩层高度，缺省默认 120% 或 1.2
* 值使用百分比表示时 svgdr 视之为字符型，例如，'120%'
* mask位置、宽高缺省值应该是为了确保遮罩效果能够全覆盖被遮罩对象

mask是遮罩的载体，自身不具备遮罩能力，道理和 filter 元素只充当 fe* 滤镜的载体一样。欲要遮罩目标对象，需要一个实体元素作为遮罩层，比如圆、矩形、路径或图片等，在mask的规范下作用于目标对象。mask自身的位置、尺寸和其子元素即实体遮罩层的位置、尺寸需要彼此配合才能实现预设的遮罩效果。以下例子，灰色矩形是参照矩形，它上面有一个位置、尺寸规格完全一样但被遮罩的绿色矩形，而遮罩层也是一个矩形：

dr.rect(20,20,200,100,'gray');
dr.mask('mask1');
dr.rect(20, 20, 100, 50, 'white').addTo('mask1');
dr.rect(20,20,200,100,'green').set('mask', 'url(#mask1)');
	

本例，mask遮罩载体位置与尺寸默认，充当遮罩层的矩形位置和被遮罩矩形一样、宽高则是各为一半，结果，200*100的绿色矩形只呈现出 100*50 的效果，其尺寸其实就是宽高设为 100*50 的遮罩层矩形的尺寸。mask默认宽高都是120%，但前面提到过，它自身不具备遮罩能力，而是依靠子实体元素去具体实现遮罩，这个实体元素的形状、位置、尺寸和颜色都会具体作用于目标对象，当然也受限于mask自身的位置与尺寸，这一点将在以下例子展示：

dr.rect(20,20,200,100,'gray');
dr.mask('mask3', 0.1, 0.1, 1, 1);
dr.rect(20, 20, 200, 100, 'white').addTo('mask3');
dr.rect(20,20,200,100,'green').set('mask', 'url(#mask3)');
	

上例，遮罩层矩形位置、尺寸和被遮罩矩形的完全一致，但是，遮罩层载体 mask 标签设置了自己的位置和宽高：xy各是10%、宽高各为100%，它的设置要优先执行，子元素遮罩矩形只能按它的规范、再根据自己的实际设置去实现遮罩。可以设置修改遮罩矩形的xy位置、宽高看看更多的遮罩效果以便加深对 mask 载体与其子元素遮罩实体的位置、尺寸间的关系）。最终效果如演示所示，左、上都被裁掉了各10%。

很多官方资料都鲜有详细介绍用作遮罩层的实体元素的用色问题。事实上，这是一个重要课题：当遮罩层遮罩实体元素设置为黑色或透明色，则它所遮罩的目标区域将完全不可见，反之，如果是白色，则它所遮罩的目标区域以原形态可见。就是说，在SVG遮罩理念里头，黑色=完全透明，白色=完全不透明。下面的实例，我们使用全覆盖的方式遮罩目标对象，遮罩层矩形的颜色使用了粉色 pink，同时为了便于观察，底层参照用的矩形和前两例相比往右边挪了100个单位：

dr.rect(120,20,200,100,'gray');
dr.mask('mask');
dr.rect(20, 20, 200, 100, 'pink').addTo('mask');
dr.rect(20,20,200,100,'green').set('mask', 'url(#mask)');
	

现在我们可以看到，遮罩矩形的粉色作用于原本绿色的矩形后，绿色矩形呈现出来的完整区域不再是纯绿，而是带有一定透明度的绿色，所以其底下图层的颜色可以对它产生作用。原理就是，遮罩层的颜色不是纯黑也不是纯白，纯黑则完全透明、目标对象被遮罩的区域完全不可见，纯白则完全不透明、目标对象被遮罩的区域完全以原始形态展现。

本节更多的篇幅用于揭示SVG遮罩，主要原因是SVG遮罩的特殊性极其明显并且异于CSS的相关规范。至于 mask() 指令，需要注意的是，① 参数的表达方式，使用浮点数表示 width、height 时是数值型，使用百分比时是字符型、需要使用引号；② 用作遮罩实体的元素需要使用 addTo() 指令将其纳入 mask 标签之内。

返回目录