還是在做草莓音樂節宣傳視訊SVG+CSS3的實現過程的文章中遇到的問題，真是個龐大的工程，在寫文章的過程中已經遇到了兩個問題需要單獨成文了。事情是這樣的
<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>標籤引用的圖形，還有就是蒙版是一個純路徑，不需要定義填充描邊等屬性。