最近在为客户做一个项目的时候，使用了SVG中clipPath和mask这两个属性来做一些动画。在项目刚开始的时候，我以为自己知道所有的关于clipPath和mask的一些使用细节，什么时候该用clipPath，什么时候该用mask。但是当实实在在的到用到的时候，才发现并不是那么一回事。所以在本文中，我尽可能的把clipPath和mask的一些细节说清楚，以便能正确的使用它们。
clipPath和mask
先来简单说下clipPath和mask。
clipPath即裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。
mask即蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。
clipPath和其他的mask一个重要的区别就是：clipPath是1位蒙板，也就是说clipPath覆盖的对象要么就是全透明(可见的，位于clipPath内部)，要么就是全不透明(不可见，位于clipPath外部)。而mask可以指定不同位置的透明度。
比如下图所示的几个例子就是用clipPath和mask来做的。
还可以来看看Yoksel的这个关于clipPath和mask的实例，不仅仅是SVG的还有CSS中的，介绍的非常全面：
这些技术非常有用，特别是在做一些特殊图形和动画的时候，大有用武之地。
clipPath
在文章开始就说了clipPath，即裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见，没有半透明区域。因为clipPath主要是使用由path组成的基本几何图形，所以，一些视觉效果不能应用在clipPath中，比如，渐变、边框等。
当然，使用clipPath处理过的元素，依然可以通过改变元素的属性来实现一些动画效果。但是，要记住的一点是，动画效果只是在clipPath中可见的部分上有用，不可见的则没有效果。
在下面这个机器人的实例中，你可以发现机器人的手臂在伸出身子后被遮住了一部分。这里是用clipPath来对手臂进行隐藏显示的。
除了这样需要隐藏显示部分内容的效果，使用clipPath还可以做很多有趣的动画效果，比如 Noel Delgado做的这个效果：
Mask
mask相比较clipPath，它多了一个功能就是支持alpha通道，比如渐变等通通不在话下。利用这个特性，可以做出很多的一些特殊的动画效果。
比如，如果你要做一个渐变的动画，会耗费非常多的内存从而影响性能。但是如果使用mask来做的话，不仅能达到同样的效果，而且还能大大的提高性能。
因为SVG支持文字并且是可编辑的，利用这点可以实现一个有趣的数据可视化效果。这个demo是 Craig Roblewsky实现的：
不像clipPath，mask支持alpha通道，所以在mask中，白色表示显示区域，黑色则表示隐藏，alpha则表示半透明显示内容。
根据这个特性，我们可以使用带有alpha通道的gif图片来表示蒙版，可以实现非常有趣的效果：
这仅仅是冰山一角，要学的还很多，特别是Yoksel，他收集了很多的使用mask技术来实现的效果，比如下面这个鸟在飞行的效果：
本文主要是从Masking vs. Clipping: When to Use Each这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
