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

Question

我正在尝试为我使用 Snap.js 使用 Inkscape 创建的 SVG 制作动画。但我发现的问题是，当尝试为对象设置动画时，没有正确响应。

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'。

如果它不是一个组元素，例如它是一个矩形，那么您可以忽略上述内容，我会编辑问题以包括实际发生的情况、任何错误等，还可能包括被移动的对象等我们可以做一个测试。

如果它本身是由 inkscape 创建的 'svg' 元素，如果尚未完成，您可能希望将其附加到 'group' 元素，并按照上述操作，因为 'svg' 元素并不真正支持转换（所以也许 x,y 可以工作）。