知识点：
-
<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说孔方兄认证
