基本原理

使用绿色绘制了两个正方形。右边正方形未使用蒙版，则以绿色填充，以白色描边，没有任何问题。

而左边正方形使用了蒙版，则填充及描边均受到了蒙版内容的影响。

mask用以定义蒙版。在该蒙版中，分别以白色、灰色、及近乎接近黑色的#222填充了3个小圆，则左边的正方形只填充了蒙版中有内容的区域。并且，蒙版区域若为白色，则完全填充；蒙版区域若为黑色，则完全不填充；黑白之间的灰色，依其灰色比例决定填充颜色的亮度。

此外，左边正方形虽然也进行了描边，但由于蒙版除了填充3个小圆之外，其他区域均没有任何内容，也即这些区域的颜色为黑色，则左边正方形不会描边。给蒙版内容添加以下描边代码：

则左边正方形也将产生描边。

可以这样理解：对于用作蒙版的图像，蒙版中的白色完全透明；黑色完全不透明；各阶灰色取灰色中的白色成分设置其透明度。

因此，蒙版中的白色，其效果等同于将相应区域挖空，黑色部分则完全遮挡，灰色部分则产生相应的透明效果。透过蒙版，用喷枪将颜料喷涂到目标区域，则可精准地只在相应部位绘制背景图像。

SVG中蒙版的不足

SVG的每个mask都是独立的，无法直接在单个蒙版中引用其他蒙版。若要对多个形状进行布尔运算，必须通过手动组合图形（使用filter和feComposite）来生成新的蒙版。

因此，下面的代码不会有布尔运算的结果：

主要原因在于目前的SVG规范尚没有定义mask-composite的属性名称并提供相应的布尔运算功能。

综上，若要快速地通过蒙版来实现多边形的布尔运算，则就应像上节一样，在HTML中实现。