SVG剪切蒙版属性clip-path实战，动态蒙版+动态图形，动动组合

仍是在作草莓音乐节宣传视频SVG+CSS3的实现过程的文章中遇到的问题，真是个庞大的工程，在写文章的过程当中已经遇到了两个问题须要单独成文了。事情是这样的

交代一下来龙去脉，右边的三角形、黄色圆形都是动态变化的，在这个动效中，关于右侧黄色圆形和三角形交集部分填充白色，最开始想到的方式是用蒙版

理论上，这个方法是可行的，但略为复杂了，而后就想到了一个SVG的标签，知道但从未在案例中使用过的 <clip-path>，剪切路径蒙版。关于剪切蒙版，对于设计师小伙伴们来讲太熟悉不过了，不管是PS仍是AI，都是很经常使用的建立图形形状的方法。由于SVG本质就是图形，因此剪切蒙版就很容易理解了，无非定义一个图形，而后发挥剪切蒙版的做用，这个具体下面再说，由于如今，又面临了一个新的问题。

<use xlink:href="#"/>标签引用时的声明

由于动态三角形要做为剪切路径蒙版和自身两次使用，因此本能的想到用<symbol>标签来定义三角形，燃鹅，在我自信满满用<use>标签去引用的时候，浏览器却狠狠的给了我一个大嘴巴，它是这样的：

什么意思？大概就是被引用的部分没有被定义，没有被定义！没有！反反复复查看了不少遍，确信无误，而后开始了各类一望无际的遐想和改造，是否是不能定义有动效的元素？改！是否是只能用<defs>定义？改！改改改！而后，现实依然是崩溃的，无论你想要或者不想要，它就在那里嘲笑你，不离不弃。更让人捉急的是，这货在codepen里表现的那叫一个顺滑，我大chrome肿么了，欺负我小美工一枚，不懂代码啊。而后开始了苦逼的代码走查之路，哦哦，不不，称不上走查，我就是和之前的SVG文件源码对比对比。果不其然

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
复制代码

这是可正常运行的SVG文件的开头，而报错的开头是这样的

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
复制代码

不错，少了一句声明xmlns:xlink="http://www.w3.org/1999/xlink"，由XLink规范定义的href属性。此属性被用做连接到其余资源的手段。好了，问题迎刃而解。

定义剪切蒙版时使用<use>标签引用的图形问题

加上以后的效果我就不截图了，由于浏览器没有报错，但剪切蒙版很差用了。我理所固然的觉得应该是下面这种，写完以后内心还美滋滋，感受本身这<symbol>用得炉火纯青，反复嵌套

<symbol id="reTri"> <!--定义三角形-->
<polygon points=" "/>
</symbol>  

<symbol><!-- 定义剪切蒙版 -->
<clipPath id="mix">
<use xlink:href="#reTri"/><!--引用定义的三角形-->
</clipPath>
</symbol>

 <g clip-path="url(#mix)"  > <!-- 圆形使用剪切蒙版 -->
 <circle ……/>
 </g>
复制代码

对，现实就是这么残酷，<symbol><clipPath>定义剪切蒙版时（或者<defs><clipPath>，效果是同样的，不过已经养成了习惯，<symbol>毕竟比<defs>好用不少），不容许是<use>标签引用的图形。不要紧，无非是写两遍的问题。

<symbol><!-- 定义剪切蒙版 -->
<clipPath id="mix">
<polygon points=" "/> <!--直接定义三角形-->
</clipPath>
</symbol>

 <g clip-path="url(#mix)"  > <!-- 圆形使用剪切蒙版 -->
 <circle ……/>
 </g>
复制代码

这里圆形和三角形由于自己是有动画效果的，比较简单，就不说了，无非class属性（不用id是由于相同的动效被用了两次）去引用定义好的animation属性就能够了。

来看下效果，还不错，能够明显的看出来，黄色圆形的白色部分就是白色圆形使用了三角形剪切蒙版后的效果，最终只须要在最顶层叠加一个相同的三角形只有描边属性没有填充属性就能够了。

小结：关于剪切蒙版属性clip-path是个很强大的功能，剪切蒙版自己能够是一个有动效的图形，使用剪切蒙版的图形也能够自带动效，动动结合，可变幻出无数种组合，语法简单，惟一须要注意的是定义剪切蒙版时不要使用<use>标签引用的图形，还有就是蒙版是一个纯路径，不须要定义填充描边等属性。