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>標籤引用的圖形，還有就是蒙版是一個純路徑，不須要定義填充描邊等屬性。