这篇文章来说说SVG蒙版（mask）在动画中的一个应用，即聚光灯动画效果：
这个聚光灯的动画效果使用蒙版（mask）可以轻易的实现。
先准备基本的SVG文件，可以使用adobe illustrator等矢量设计软件设计图形再导出为SVG图形：
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100">
<defs>
<mask id="experiment">
<circle fill="#fff" cx="66.836" cy="50.356" r="34"/>
</mask>
</defs>
<path mask="url(#experiment)" class="experiment" fill="yellow" d="M150.142 73.467v-46.61h34.56v7.884h-25.15v10.335h23.402v7.854h-23.4v12.685h26.04v7.854H150.14v-.003zM188.835 73.467l15.93-24.323-14.436-22.288h11l9.348 14.976 9.157-14.976h10.905l-14.498 22.638 15.93 23.974H220.82l-10.333-16.12-10.365 16.12h-11.287zM237.004 73.467v-46.61h15.103c5.723 0 9.453.233 11.19.698 2.672.7 4.908 2.22 6.71 4.562 1.8 2.343 2.702 5.37 2.702 9.078 0 2.86-.52 5.268-1.56 7.217-1.038 1.95-2.357 3.482-3.957 4.595-1.6 1.112-3.227 1.85-4.88 2.21-2.247.445-5.5.667-9.76.667h-6.137v17.583h-9.412zm9.41-38.727v13.227h5.152c3
...
</svg>
从上面的SVG代码中可以看到定义了一个ID为experiment的圆圈蒙版（mask），按照蒙版的原理，在蒙版区域内的内容是可见的，蒙版区域外的内容是不可见的。依据这个原理，我们通过移动蒙版的位置就可以实现这个聚光灯的动画效果。
就是这么简单，移动蒙版的位置使用CSS3的animation就可以实现：
circle {
transform: translateX(100px);
animation: 3s move alternate infinite;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
一个聚光点的效果就完成了，so easy！详细的代码可以去下面的链接仔细看看。
