svg实现绘制路径动画

1，首先用svg绘制一条path路径，然后进行如下操作
　　ps: 下面是svg中两个属性及值的意义
　　　　stroke-dasharray是让你指定画出的线段每段的长度，第二个值是各段之间空隙的长度。
　　　　stroke-dashoffset是让你指定每个小段的起始偏移量。
　　var path = document.querySelector('.squiggle-animated path');
　　var length = path.getTotalLength();
　　// 清除之前的动作
　　path.style.transition = path.style.WebkitTransition = 'none';
　　// 设置起始点
　　path.style.strokeDasharray = length + ' ' + length;
　　path.style.strokeDashoffset = length;
　　// 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
　　path.getBoundingClientRect();
　　// 定义动作
　　path.style.transition = path.style.WebkitTransition =
　　  'stroke-dashoffset 2s ease-in-out';
　　// Go!
　　path.style.strokeDashoffset = '0';

转载于:https://www.cnblogs.com/lw-88238/p/7466710.html