纯CSS实现帅气的SVG路径描边动画效果

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=4089

一、应该人人皆会的基础技术

简而言之，就是让SVG的描边像是有人绘制一样的动画效果。

国外很多相关介绍的文章，来看看一些效果gif吧~

我至少看到了4篇外文对此技术介绍（参见文末参考文章），觉得挺有意思，也很好入门，可以不依赖JavaScript，故移花接木，借花献佛，以自己的理解给大家介绍下。

二、效果先行，兴趣挑起

您可以狠狠地点击这里：帅气的签名动画demo

三、你需要知道的基础知识

SVG中有个比较重要的属性分支，名为stroke, 中文软件中称之为“描边”。

stroke除了自己，还有其他诸多兄弟姐妹，来，站起来给大家瞅瞅：

• stroke 表示描边颜色。这很有意思，名字不是stroke-color, 而就是单纯的stroke. 其值，官方称之为”paint“，我就不上梁小丑般翻译了。一般有如下类型值：none, currentColor, <color>. none表示没有颜色，<color>就是我们常规的颜色值。RGBA, HSBA都支持。currentColor略高深，我看了下官方文档，个人理解为：共享父级但不越过SVG元素的XML中color(style中的)值；可以让路径绘制的文字直接继承父标签的color颜色值。
• stroke-width 表示描边的粗细。
• stroke-linecap 表示描边端点表现方式。可用值有：butt, round, square, inherit. 表现如下图：
  
• stroke-linejoin 表示描边转角的表现方式。可用值有：miter, round, bevel, inherit. 表现如下图：
  
• stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。具体干嘛的，我自己也不确定。大家可查查其他资料。
• stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
• stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
• stroke-opacity 表示描边透明度。默认是1.

而，与本文相关的动画效果相关的就是stroke-dasharray和stroke-dashoffset着两兄弟。

四、stroke-dasharray和stroke-dashoffset

为了方便说明，减少干扰，我们拿一条直线炒个板栗，如下：

点击下面的滑块（或输入数值）体验下：
stroke-dasharray:
stroke-dashoffset:

HTML代码为：

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
 </g>
</svg>

移动滑块时候（或文本框输入）时候，通过setAttribute方法设置<line>节点元素的stroke-dasharray和stroke-dashoffset值，达到了上面的效果。//zxx: 如果您发现移送滑块没有效果，可能您访问的不是原出处。

一个特殊情况
我们现在都试想一下，如果stroke-dasharray和stroke-dashoffset值都很大，超过了描边路径的总长度，会怎么样？

用中文解释就是，一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样。

上面的两个滑块都右滑到底，然后下面的滑块往左慢慢滑（请使用支持type=range的浏览器），您会看到直线慢慢出来了，这就是SVG路径绘制动画的原理。

五、CSS3 animation的支持

内联SVG的强大之处在于，其本身也是个HTML元素，能被CSS属性控制，处理传统的高宽定位、边框背景色等，SVG自身的一些特殊属性也能被CSS支持，甚至在CSS3 animation动画中。

于是，我们上面探讨的SVG描边动画效果能够轻松使用CSS3 animation实现，无需任何JavaScript，这就是一开始Demo页面的实现。

其CSS代码如下：

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

1000没有什么特殊含义，只是足够大，保证比比每个路径的长度大即可，你也可以是1500，区别就是描边速度更快一点。

属性CSS3 animation的小伙伴应该一看就看出上面代码的含义的，5秒动画，stroke-dashoffset从1000到0. 描边动画形成。

以上CSS代码几乎可以通用。无论你的SVG路径多么复杂，都能以描边动画形式呈现。根据自己的测试，IE10+下没有动画效果，不是CSS不支持SVG的stroke相关属性，而是animation中不支持stroke相关属性的动画。

以上效果有什么用的，我试想了以下一些场景：演示时候分步展示一些要点；或者图片等hover描边效果；或者网站tip注意项的箭头引导提示效果等，都很有用。技术+你脑中不断的创意，才有精彩纷呈的创新体验。

六、路径的长度

如果您想知道路径，或线条的准确长度。可能需要借助JavaScript，类似下面的代码：

var path = document.querySelector('path');
var length = path.getTotalLength();

以上，祝你好运！

七、参考文章

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。