Search code examples
javascriptanimationsvg

Is path animation possible with SVG.js

There are many examples of SVG path animation, both natively

http://jsfiddle.net/FVqDq/

and with Raphael.js

http://jsfiddle.net/d7d3Z/1/

p.animate({path:"M140 100 L190 60"}, 2000, function() {
    r.animate({path:"M190 60 L 210 90"}, 2000);
});

How is this possible with the svg.js library?

Solution

  • No, this is not yet possible with svg.js. I have been looking into it and it will be a rather large implementation. As I try to keep the library small it will never be part of the library itself, but I might write a plugin. Although at the moment I do not have much time on my hands so all help will be appreciated.

    UPDATE:

    This is now possible with SVG.js out of the box if you use paths with equal commands but different values.

    But we also have a path morphing plugin for SVG.js which is probably the thing you are looking for.