所以SVG和特别是Snap.svg对我来说是一个新手,我一直试图让我的svg对象沿着定义的路径动画。
我设置了一个小提琴,展示了迄今为止我能够完成的任务: http://jsfiddle.net/k1L0g5j2/1/
// ---------
// SVG C
// ---------
var snapC = Snap("#svgC");
// SVG C - "Squiggly" Path
var myPathC = snapC.path("M1462,170c0,0,42,282-236,290s-270-68-506,60s-273.7,70.4-466-160C32,94-232,170-240,358c0,420.4,498-272,598-68").attr({
fill: "none"
});
// SVG C - Draw Path
var lenC = myPathC.getTotalLength();
// SVG C - Triangle (As Polyline)
var Triangle = snapC.polyline("0,30 15,0 30,30");
Triangle.attr({
id: "plane",
fill: "#fff"
});
var triangleGroup = snapC.g(Triangle); // Group polyline
setTimeout(function () {
Snap.animate(0, lenC, function (value) {
movePoint = myPathC.getPointAtLength(value);
triangleGroup.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
}, 4500, mina.easeinout);
});
但我需要将此三角形更改为另一个SVG对象(moth.svg)。我无法弄清楚这是如何完成的。