Is path animation possible with SVG.js

Question

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?

Answer 1

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.

Answer 2

There is a quick and dirty way to animate a line with svg.js: http://jsfiddle.net/c4FSF/1/

draw
    .line(0, 0, 0, 0)
    .stroke({color: '#000', width: 2})
    .animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
    .during(function(t, morph) {
        this.attr({x2:morph(0, 100), y2: morph(0, 100)})
    })

Animating complex SVG paths as wout said will require a plugin. Unfortunately I don't (yet) know enough about SVG, but I'm thinking of writing a plugin which would use the SMIL animation tag. Which is what is used in the first link of the question.

Answer 3

We can make path animation by finding the bounding box of your path and the do like this.

if your path having some clipping -rectangle means like that below

<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>

var box = $("#"+ path.id")[0].getBBox();

create the rectangle based on the box and the set this rectangle as your clip-path in path.

then increase the width of the rectangle step by step in jquery.animate.

doAnimation: function () {

//cliprect is your clipped rectangle path.

        $(clipRect).animate(
                                 { width: 1000},
                                 {
                                     duration: 2000,

                                     step: function (now, fx) {
                                         $(clipRect).attr("width", now);
                                     }
                                 });


    },

jquery.animate step function is used to increase the width of your clip-rect step by step.

Answer 4

You can animate paths using the svg.path.js plugin.

See the first examples (using the .drawAnimated method).