Question

如何让SVG的path动起来

Answer 1

//利用Jquery获取到path元素
var path = $("#myCanvas").find("path")[0];

//获取path画出线条的总长度
var length = path.getTotalLength();

// 清除之前的动作
path.style.transition = path.style.WebkitTransition = 'none';

// 设置起始点
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

// 获取path的边界矩形的位置 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
path.getBoundingClientRect();

// 定义动作
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';