Snap.svg - 如何将折线更改为另一个svg对象

时间:2014-12-13 20:11:34

标签: svg snap.svg

所以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)。我无法弄清楚这是如何完成的。

0 个答案:

没有答案