I have a rather interesting issue with SVG animation.

I am animating along a circular path using Raphael

obj = canvas.circle(x, y, size);
path = canvas.circlePath(x, y, radius);                                                     
path = canvas.path(path); //generate path from path value string
obj.animateAlong(path, rate, false);

The circlePath method is one I have created myself to generate the circle path in SVG path notation:

Raphael.fn.circlePath = function(x , y, r) {      
  var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z";         
  return s; 
} 

So far, so good.

This all works. I

have my object (obj) animating along the circular path.

BUT:

The animation only works if I create the object at the same X, Y coords as the path itself.

If I start the animation from any other coordinates (say, half-way along the path) the object animates in a circle of the correct radius, however it starts the animation from the object X,Y coordinates, rather than along the path as it is displayed visually.

Ideally I would like to be able to stop/start the animation - the same problem occurs on restart. When I stop then restart the animation, it animates in a circle starting from the stopped X,Y.