知識點：
-
<a>標籤
-
<clipPath>標籤
先說a標籤
使用 SVG 的錨元素 (<a>) 定義一個超鏈接。
由於這個元素和 HTML 的 <a> 標籤 使用了相同的標籤名，當使用 CSS 或 querySelector 選擇"a"時，可能應用到錯誤的元素上。 可以嘗試使用 @namespace規則 來區分兩者。
a標籤中值得一提的是 target="_blank"屬性，表示在新的頁面打開標籤中的鏈接地址。如果不設置target屬性，默認是在當前頁打開。
示例用法，上代碼
<svg width="140" height="30"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><a xlink:href="https://www.baidu.com/"><rect height="30" width="120" y="0" x="0" rx="15"/><text fill="white" text-anchor="middle"y="21" x="60">Xi說SVG</text></a></svg>
運行效果
藉着a標籤的引子，我整理了之前的文章，但由於在微信中展示不出來效果，只能截圖以示之。
使用a標籤的同時，使用defs標籤定義了linearGradient標籤，增強感官印象。
再說clipPath標籤。
<clipPath> 標籤定義了一個限制路徑，其他控件可通過clip-path 屬性引用這個路徑，這樣，二者結合，再輔以動畫，可以實現鏤空填色或者燃燒鞭炮引線的效果。
PS：這個限制路徑，限制了圖形的可見範圍，超出限制範圍的，則不可見。
利用這個特點，可以通過path畫出各種圖形，然後再通過動畫的移動，展示出美妙的效果，這裏簡單舉個栗子：通過clipPath制定出限定區域，然後通過rect矩形動畫改變矩形寬度，實現文字從左向右展示出來。文字背景同時使用了linearGradient標籤，實現顏色漸變。
看效果：
效果還是被吞，上視頻
clipPath限制路徑之文字展現
Xi說孔方兄認證
