如何让SVG的path动起来

背景： 在开发项目中，选择了使用HTML5中SVG的path标签进行画动态的轨迹线，在往SVG标签中插入path标签后发现轨迹线画出来了，但是不会“动”

解决方案：

//利用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';