这是我的一个关于 SVG 的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于 SVG 技术应用可以去网站看看。
要是觉得文章还不错的话，可以多多推荐哦。
今天这篇文章来聊聊 SVG 路径描边动画。
关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了 SVG 中的路径（ path ）来实现的描边动画效果。
上面图所示的效果就是我们要实现的效果。
在实际编写动画效果前，最重要的是要准备矢量文件。第一步是要使用 Illustrator 来创建你需要描边效果的矢量文件，需要使用钢笔工具来创建描边效果的矢量文件。当然如果你仅仅是对怎么实现描边的动画效果感兴趣，可以跳过这一步。
在设计图形的时候，要养成良好的图层命名习惯，尤其是要导出 SVG 文件的时候更应如此。如果不对图层命好命，那么导出来的 SVG 文件会异常复杂难以辨认，所以为了后面开发方便，还是好好的对图层命好命吧。图层的名字保持简洁容易理解就可以了。对于嵌套的子图层也要命好名，如下图所示：
设计好图形后，就可以使用 Illustrator 来导出为 SVG 文件了，在导出文件前需要对图形进行一些设置，相关的设置可以去看看我以前写一篇文章，这里就不再阐述了。
再一次提醒在输出 SVG 文件前，记得把图层命好名。上面的图像导出 SVG 后，使用代码编辑器工具打开 SVG 文件：
看到代码里的 ID 了么？通过 ID 我们就可以清楚的知道每条路径（ patn ）所对应的图形，这就是图层命名带来的好处。想象一下，如果你在导出前没有命好名，为了找到每条路径（ path ）所对应的图形那是怎样的一种痛苦。
当然导出 SVG 后，还需要进一步优化和压缩 SVG 文件，一般使用像SVGO类似的工具就可以很好的对 SVG 文件进行优化。不过，像我们现在这样要直接来操纵 SVG 文件来编写动画效果，最好是不要以开始就对 SVG 文件进行优化。我们可以在边写完动画效果后再对它进行优化。
至于 SVG 文件的优化可以去看看这篇文章。
在开始实现路径（ path ）描边动画前，先要明白stroke-dasharray 和stroke-dashoffset这两个概念。
在 SVG 中也可以像 CSS 中那样指定边框为虚线要用到属性stroke-dasharray。 stroke-dasharray 属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。
如果只有一个数字 5 ，则表示会先画 5px 实线，紧接着是 5px 空白，然后又是 5px 实线，从而形成虚线。
比如我有一条 200px 的线，我把stroke-dasharray的指定为 200 ，它就表示先画 200px 实线，紧接着是 200px 空白，然后又是 200px 实线，从而形成虚线。
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 浏览器是支持这种描边动画效果的，不过它要求使用有明确单位的值，比如stroke-dasharray的值就必须为 200px 。
不幸的的是， Internet Explorer 浏览器不支持在 CSS 中使用动画来控制stroke-dashoffset的值。
如果你一定要在 IE 上也实现描边动画效果，可以借助下面两种 javascript 方法来实现：
解决方法 2 是使用一个 javascript 的库来实现，vivus。
原文地址，根据自己的理解有所删减。
推荐参考资料：
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.