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

TimDog answer was best solution.

In addition, just remember, transform string in this case means, that it will add 400 points to every path point/line X coordinate, and 0 points to every Y coordinate.

That means, M100 100L190 190 will turn into M500 100L590 190.

So, if you need to move a path element to another position, the difference between current position and new position coordinates should be calculated. You can use first element to do that:

var newCoordinates = [300, 200],
curPos = testpath.path[0],
newPosX = newCoordinates[0] - curPos[1],
newPosY = newCoordinates[1] - curPos[2];

var _transformedPath = Raphael.transformPath(testpath.path, "T"+newPosX+","+newPosY);
testpath.animate({path: _transformedPath});

Hope this will help someone.