Snap.js沿指定路径移动SVG对象

Question

我正在尝试动画SVG，这是我创建的Inkscape使用Snap.js。但我发现的问题是，当试图动画对象是没有正确的反应。

Svg是这样加载的

​

var s = Snap("#svgB");
var g ;
var group = s.g();

var myPathB = s.path("M246,1723.4c-27.2-18-76.8-50.3-61.3-73.2c15.5-22.8-4.9-42.7-15.8-34.8 c-31.9,3.9-16.6-45.2-23.9-64.6c-4.5-11.9-30.3-38.4-11.6-45c21.6-20.5-20.4-25.7-4.4-28.1c16-2.4,14.3-22.7-3.3-30 c-9.5-4-30.3-69.9-7.9-74.1c22.3-4.2,6.1-65.6,8.8-86.7c3.6-27.6,19.1-63.4,34.8-51c15.7,12.5,17.6,14.2,20.7-8 c3-22.2,14.8-21.8,20.9-5.7c6.1,16.2,55.8-14.1,75.6-37.3c46.5-54.5,22.3-50.4-2-68.5c-30.9-23,20-100,20-100").attr({
  fill: "none",
  strokeWidth: "17",
  stroke: "#FFF",
  strokeMiterLimit: "10",
  strokeLinecap: "round",
  strokeDasharray: "10",
  strokeDashOffset: "1000"
});
  
 
	Snap.load("car.svg", function (f) {
			 g=  f.select("g");
			 g.drag(function () {
				      animateAlongPath(myPathB,group,0,100330);  
 
                }); 
 
                s.append(group);
                g.drag();
				
				
	});

​

我使用的功能是

​

function animateAlongPath( path, element, start, dur ) {
 var len = Snap.path.getTotalLength( path );
setTimeout( function() {
        Snap.animate( 0, len, function( value ) {
        var movePoint = Snap.path.getPointAtLength(path,value);
		console.log(movePoint);
        element.transform('t' + movePoint.x + ',' + movePoint.y)	 ;		 
}, dur,mina.easeinout); 
 });
} 

​

Codepen：http://codepen.io/georgegijo/pen/mEdEYK

Answer 1

您可能需要提供一个工作示例，因为上面的代码不足以进行测试。

我怀疑最初的问题可能是这句话.

element.attr({ x: movePoint.x, y: movePoint.y });

我注意到，在前面的代码中，元素名为'g‘。这是因为元素是“组”元素吗？

如果是这样，则不能使用x，y，因为它们不是组元素的有效属性。您需要使用转换。所以你会把密码改得像.

element.transform('t' + movepoint.x + ',' + movepoint.y ) 

“t”是用来翻译的，如果你想用movepoint.alpha旋转它，你也可以在后面加上一个带有角度的'r‘。

如果它不是一个group元素，例如rect，那么您可以忽略上面的内容，我会编辑这个问题，包括实际发生了什么，任何错误等等，再加上可能包括被移动的对象等等，这样我们就可以进行测试了。

如果它本身是由inkscape创建的'svg‘元素，您可能希望将它附加到'group’元素(如果还没有完成)，并遵循上面的步骤，因为'svg‘元素实际上不支持转换(所以x，y可能会工作)。