svg 下aminate image

需求：人员的头像可以按轨迹运动，并将运动轨迹逐渐动态显示

实现：CSS3 animation的支持和svg 的animateMotion

css:  整个运动轨迹30s完成

附：若不添加"linear" 属性，当path路径重复时，动态路径不会重复，这样会造成图像运动的路径和path运动路径不同。若要按照原来的所有路径运动并保持图像和path路径一致，则必须加此属性。

    path{
        animation: dash 30s linear infinite;
    }

	@keyframes dash {
		to {
			stroke-dashoffset: 0;
		}
	}

js:

1 每个节点是一个圆点，所有的数据来源是dataset1

			svg.selectAll("circle")
				.data(dataset1)
				.enter()
				.append("circle")
				.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
				.style('fill',"red")
				.style("stroke","black")
				.style("stroke-width","1px")
				.attr("cx", function(d, i) {
					if (i == 0) {
						// x0 = Math.round(d.x / rate);
						//