There are many examples of SVG path animation, both natively

/

and with Raphael.js

/

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?

There are many examples of SVG path animation, both natively

http://jsfiddle/FVqDq/

and with Raphael.js

http://jsfiddle/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?

• javascript
• animation
• svg

5 Answers 5

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 mands but different values.

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

There is a quick and dirty way to animate a line with svg.js: http://jsfiddle/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 plex 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.

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.

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

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

Another option, which we've resorted to, is to use textPath and then use a character.

In our case we're using the • entity, but I'm thinking if you create your own typography in .svg, .woff etc, you can have flat shapes of any kind.

So you would use your character as in here:

http://jsfiddle/wbx8J/3/

   /* create canvas */
    var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)

    /* create text */
    var text = draw.text(function(add) {
      add.tspan('•').dy(27)
    })
    text.font({ size: 80, family: 'Verdana' })

    /* add path to text */
    text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')

    /* visualise track */
    draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })

    /* move text to the end of the path */
    function up() {
        text.textPath.animate(3000).attr('startOffset', '100%').after(down)
    }

    /* move text to the beginning of the path */
    function down() {
        text.textPath.animate(3000).attr('startOffset', '0%').after(up)  
    }

    /* start animation */
    up()