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).

Answer 5

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.net/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()