Raphael JS : how to move/animate a path object?

Question

Somehow this doesn\'t work...

var paper = Raphael(\"test\", 500, 500);

var testpath = paper.path(\'M100 100L190 190\');

var a = paper.rect(0,0,10,10);
a.at         


        

Answer 1

Yet another way is to use "transform" attribute:

testpath.animate({transform: "t400,0"}, 1000);

to move the path to the right by 400px, relative to the original position.

This should work for all shapes, including paths and rectangles.

Note that:

• "transform" attribute is independent of x, y, cx, cy, etc. So these attributes are not updated by the animation above.

• The value of "transform" attribute is always based on the original position, not the current position. If you apply the animation below after the animation above, it will move it 800px to the left relatively, instead of moving it back to its original position.

  testpath.animate({transform: "t-400,0"}, 1000);