[原创] 实现SVG绘画动作的效果

背景:在网上看到别人的svg图片在显示的时候是画出来的线型图，感觉很不错。研究了一下，写出下面demo,可以直接拿来运行

先上效果图

注意：动画效果貌似只能在svg中的path标签有效，关键的实现就是下面两个属性的使用和css3中的animation的控制

先掌握的知识点
svg基础点
stroke-dasharray: 用来描边的点划线的图案范式,数值越大，虚线越宽
stroke-dashoffset：属性指定了dash模式到路径开始的距离。
animation动画基础点
animation css3的动画关键属性，具体使用请另外百度。在本例中主要是控制dasharray,dashoffset的值变化，从而实现绘制动画效果
好了，下面就是绘制的步骤了，其实一共也就两步
1 控制虚线的宽度，如果初始化为空白，则就让stroke-dashoffset和stroke-dasharray等于要绘制的path总长度，如何计算path总长度呢？

	var path = document.querySelector('.path');
   	var length = path.getTotalLength();   //这个数值就是了

2 animation动画属性，定义一个使stroke-dashoffset为0，并定义动画的生命周期时间即可，具体看下面demo代码。

下面就是demo内容
注意：必须要SVG的path中才能实现。

参考资料：
在线绘制svg平台
How SVG Line Animation Works