SVG_18_a标签_clipPath标签_限制路径效果

知识点：

• <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说孔方兄认证