svg动画；同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。
stroke-dasharray：它是一个 length 和 percentage 数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2；
因此，我们之前的路径就会变成这个样子：
效果：
理解了stroke-dasharray的作用之后，下面我们就可以使用css3的animation来让这个路径动起来。
效果：
511这个值是整个路径的长度，可以用js的document.getElementById(‘path’).getTotalLength()得到
stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和 511，所以一开始整个路径都是空隙，所以是空的。
然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是 511，而实线的长度也慢慢变成511，所以整个线条就出现了。
同样利用stroke-dashoffset也可以实现这个效果，原理就是最初线条分为511实线，和511空隙，但是由于设置了offset使线条偏移不可见了，当不断修改offset后，线条慢慢出现。
效果：
当我们掌握了上述的方法后，整个利用SVG实现线条动画的原理就已经清楚了，我们需要的就是一个SVG路径了，但是总画一些简单的线条还是不美啊，那我们如何才能得到复杂的svg路径呢？
找UI设计师要一个。
自己利用PS和AI做一个，只需要简单的2步。
以部落LOGO为例：
1，得到部落LOGO的png图片。
2，右键图层，然后点击从选区生成工作路径，我们就可以得到：
3，文件–导出–路径到AI，将路径导出在AI里面打开。
4，在AI里面选择保存成svg格式的文件，然后用sublime打开svg文件，将path的d拷贝出来即可。
5，利用上文介绍的实现动画的方法，我们就可以轻松的得到了下面这个效果。
线条动画进阶：
可以看到上面的动画效果和文章最初显示的动画效果还是有区别的，要想实现
文章最初的动画效果，需要用到SVG的 symbol 和 use 来实现，读者可以在网上查一下这两个标签的用法。
思路就是：
1，将原来只有一条path的路径替换成两条，并且这两条的路径是完全重合的。
2，分别设置两条路径的stroke-dasharray和stroke-dashoffset的css3的animation动画，注意两条路径的动画不能完全一样要有差值。
3，设置成功之后就可以利用animation动画触发的时机和改变程度来实现多条动画效果。
效果：
那么如何实现alloyteam的文字动画呢，其实原理也是利用了stroke-dasharray和stroke-dashoffset，这两个属性不仅可以作用在 path 上，同样可以作用在 text 上。
这里用了5条完全重合的路径，并且每个路径的颜色和动画效果都不一样。
效果：
开启愉快的svg线条之旅吧！
参考资料：https://www.nihaoshijie.com.cn/index.php/archives/667