css svg做动图,如何制作svg动态图

如何制作svg动态图

原文链接：http://www.webhek.com/post/how-svg-line-animation-works.html

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。

其实我没有什么好增补的，只是想把这种技术说的更明白些，所以，在这里我要用我的方式把这种技术再讲解一遍。

1. 你有一个SVG图形

2. 这个图形必须要有一个线条(stroke)属性

3. 线条可以是虚线

我们可以用Illustrator制作，也可以用编程实现。我们用CSS来设置这些路径的样式(假定我们这里是inline SVG，或通过一个)，把它们变成虚线形式。.path {  stroke-dasharray: 20;}

这是让虚线里的每个小线段长度为20px。