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);
						// y0 = Math.round(d.y / rate);
						photoUrl = d.photoUrl
					}
					return Math.round(d.x / rate);
				})
				.attr("cy", function(d, i) {
					return Math.round(d.y / rate);
				})
				.attr('r', function() {
					return 3;
				})

2 动态生成路径

			var paths = document.querySelectorAll('path');
			[].forEach.call(paths, function(path) {
				// Make line to animate
				var length = path.getTotalLength() + 10;
				path.setAttribute('stroke-dasharray', length);
				path.setAttribute('stroke-dashoffset', length);

			})

3 image的动态轨迹

附：1. motion.beginElement()必须添加，若不添加，图片不会显示也不会运动。

       2. .attr('x', -15), 此时图像大小为30px，表示把图像向左偏移15px,因为默认是以图像的左上角为起始点。

			var pathData = document.querySelectorAll('path')[0].getAttribute('d');
			// Draw image
			svg.append("image")
				.attr("xlink:href", photoUrl)
				.attr('x',"-15")
				.attr('y',"-15")
				.attr("id", "cop")
				.style('width',"30")

			// Animate image
			var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
			motion.setAttribute("begin", "0s");
			motion.setAttribute("dur", "30s");
			motion.setAttribute("x", "30");
			motion.setAttribute("y", "30");
			motion.setAttribute("repeatCount", "indefinite");
			motion.setAttribute("path", pathData);
			document.getElementById("cop").appendChild(motion);	
			motion.beginElement(); 

4 添加当鼠标移动到节点时，显示图像和时间，移开鼠标，图像时间消失

			svg.selectAll("circle")
				.on("mouseover",function(d,i){
					svg.append("image")
							.attr("xlink:href", d.photoUrl)
							.attr('x',(Math.round(d.x/rate)))
							.attr('y',(Math.round(d.y/rate)))
							.attr('id', "overImgId")
							.style('width',"30")
					svg.append('text')
						.style('fill',function(d,i){
							return colors[i];
						})
						.style('font-size',"0.8em")
						.attr('x',(Math.round(d.x/rate)) + 30)
						.attr('y',(Math.round(d.y/rate)) +20)
						.attr('id', "overTextId")
						.attr('transform',"translate("+padding.left+","+padding.top+")")
						.text(d.name + " on " + msToDate(d.timeSec *1000));
				})
				.on("mouseout",function(d,i){
					d3.select("#overImgId").remove();
					d3.select("#overTextId").remove();
				});

动态效果图

参考：https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

来源：CSDN

作者：qq_33744949

链接：https://blog.csdn.net/qq_33744949/article/details/103838000