mask工作原理设计师或者会使用Sketch、Photoshop等设计工具的朋友应该都知道mask（遮罩）。下面我就以Photoshop为例简单说明一下蒙版的工作原理。在上图中，我创建了两个图层——蓝色背景和红色前景，并在红色前景（右侧的红色圆圈）上应用了蒙版。通常红色前景应该完全覆盖蓝色背景，但请注意红色圆圈中的蒙版，我在上面画了一个黑色矩形。蒙版中黑色表示不可见（不透明度：0），白色表示可见（不透明度：100%），将蒙版映射到红色层后很容易理解：红色层上黑色矩形对应的区域变为Invisible,所以下面的蓝色会透出来。基本用法：显示和隐藏还是以上面Photoshop中的图片为例，我们一步步使用SVG来制作这样一张图片。首先创建红色前景和蓝色背景要在SVG中使用mask，需要在中定义，并在使用前为其设置一个唯一的id，然后在需要的元素上添加一个属性mask="url(#id)"敷面膜。光有遮罩是没有用的，我们还需要在遮罩中添加图形元素并指定黑白颜色。至此基本的掩码已经完成，https://codepen.io/LuXuanqing...高级用法：在透明度渐变之前讲masking原理的时候说：black表示不可见（opacity:0），white表示可见（opacity:100%）。那么黑白之间的灰色代表什么呢？聪明的同学已经想到了，从0%到100%是一个线性变化，所以黑白之间的灰色会是半透明的，不同的灰度代表不同程度的半透明，越接近白色可见度越高。蒙版中的黑白渐变应用于颜色层将产生透明度渐变。https://codepen.io/LuXuanqing...总结与讨论掌握以上两种用法基本可以满足日常需要，但是还有几个我不会完全不知道专有属性maskUnits、maskContentUnits、x、y、width、height的使用方法，希望有了解的朋友多多指教。
