这是我的一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于SVG技术应用可以去网站看看。

要是觉得文章还不错的话，可以多多推荐哦。

今天这篇文章来聊聊SVG路径描边动画。

关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了SVG中的路径(path)来实现的描边动画效果。

上面图所示的效果就是我们要实现的效果。

准备矢量文件

在实际编写动画效果前，最重要的是要准备矢量文件。第一步是要使用Illustrator来创建你需要描边效果的矢量文件，需要使用钢笔工具来创建描边效果的矢量文件。当然如果你仅仅是对怎么实现描边的动画效果感兴趣，可以跳过这一步。

命名图层

在设计图形的时候，要养成良好的图层命名习惯，尤其是要导出SVG文件的时候更应如此。如果不对图层命好命，那么导出来的SVG文件会异常复杂难以辨认，所以为了后面开发方便，还是好好的对图层命好命吧。图层的名字保持简洁容易理解就可以了。对于嵌套的子图层也要命好名，如下图所示：

导出

设计好图形后，就可以使用Illustrator来导出为SVG文件了，在导出文件前需要对图形进行一些设置，相关的设置可以去看看我以前写一篇文章，这里就不再阐述了。

输出SVG文件

再一次提醒在输出SVG文件前，记得把图层命好名。上面的图像导出SVG后，使用代码编辑器工具打开SVG文件：

看到代码里的ID了么？通过ID我们就可以清楚的知道每条路径(patn)所对应的图形，这就是图层命名带来的好处。想象一下，如果你在导出前没有命好名，为了找到每条路径(path)所对应的图形那是怎样的一种痛苦。

优化

当然导出SVG后，还需要进一步优化和压缩SVG文件，一般使用像SVGO类似的工具就可以很好的对SVG文件进行优化。不过，像我们现在这样要直接来操纵SVG文件来编写动画效果，最好是不要以开始就对SVG文件进行优化。我们可以在边写完动画效果后再对它进行优化。

至于SVG文件的优化可以去看看这篇文章。

动起来

在开始实现路径(path)描边动画前，先要明白stroke-dasharray 和stroke-dashoffset这两个概念。

Stroke Dash Array

在SVG中也可以像CSS中那样指定边框为虚线要用到属性stroke-dasharray。stroke-dasharray属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。

如果只有一个数字5，则表示会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。

比如我有一条200px的线，我把stroke-dasharray的指定为200，它就表示先画200px实线，紧接着是200px空白，然后又是200px实线，从而形成虚线。

Stroke Dash Offset

stroke-dashoffset属性表示路径从开始位置的偏移量。比如在下面我定义了stroke-dasharray的值为5、10、30、10表示5px的虚线、10px的空白、30px的虚线、10px的空白，如此循环。然后，通过改变它的stroke-dashoffset的值来看看会发生什么：

从图片中可以看到，通过调整stroke-dashoffset的值，可以重新设置路径开始的位置。在上面的实例中，我设置stroke-dashoffset的值为15px，可以看到路径移动了15px的距离。

动态改变偏移值

我们把路径的stroke-dasharray和stroke-dashoffset都设置为200px的值，会发现什么也看不到了，因为路径的虚线和空白距离都是一样的，而stroke-dashoffset的值也是200px，即表示路径从开始的位置偏移了200px的值(记住路径的偏移是从左边的原点开始的)，所以就看到一片空白。

如果使用CSS3的来动态改变路径的偏移值即从200px到0，就会看到路径就像是用笔慢慢画出来的。

冰淇淋描边动画效果

原理明白，下面正式开干了。

首先在Illustrator中得到相关路径的长度，可以在文档信息面板中得到路径的长度。

为了更好的来编写动画效果，需要给每一个路径赋予了一个类名，这样可以针对每一条路径来更加精细控制动画效果。

然后，使用上面说的stroke-dasharray 和stroke-dashoffset两个属性来实现描边动画效果。

一个帅气的路径描边动画效果就实现了。

看起来好像不错了，但是还有优化的空间。

进一步优化

通过改变一些路径的虚线的长度，可以达到加快路径绘制的动画效果。很好理解，同样在2s内绘制一个短的虚线肯定要比绘制一个长的虚线的要快，即移动小一点的偏移量要比大一点的偏移值在同样的时间内肯定是要快一点。配合动画的延迟执行即animation-delay可以使动画效果更有趣一点。

最终线上代码效果可以去这里看看demo。

最后要提醒一点的是：这种动画效果对于使用embedded方式来引入SVG的情形是不支持的。如果要使用这样的动画效果，最好是使用inline svg的方式来引入svg即直接把SVG文件代码写到html文件中。

友情提醒

下面来说说一些浏览器的支持情况。

Mircosoft Edge

最新的Mircosoft Edge浏览器是支持这种描边动画效果的，不过它要求使用有明确单位的值，比如stroke-dasharray的值就必须为200px。

Internet Explorer

不幸的的是，Internet Explorer浏览器不支持在CSS中使用动画来控制stroke-dashoffset的值。

如果你一定要在IE上也实现描边动画效果，可以借助下面两种javascript方法来实现：

解决方法2是使用一个javascript的库来实现，vivus。