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';
巴特西

svg实现绘制路径动画

最新文章

热门文章
