Raphael.js Animate the rotation of a path with a given center point

Question

I'm trying to animate triangle (think, needle of an angular gauge) such that it rotates at a given point (see the red dot).

var svg = Raphael("container",400,400),
    triangle = svg.path("M210 200L190 200L200 100Z").attr({fill:"#000"}),
    circle = svg.circle(200,200,5).attr({fill:"#f00"});

// to animate ??
triangle.animate({rotation:100,cx:200,cy:200},1000,'<>');
// doesn't work

JSFiddle Example

I can rotate (without animating) along that center fine:

// to rotate with center point 200,200, works fine
triangle.rotate(80,200,200);

But I can't for the life of me figure out how to animate the rotation such that it rotates around that point. It always seems to rotate at the center of the path.

Any help?

Answer 1

Since Raphael.js version 2.0

To animate simple rotation you can use:

yourTriangle.animate({transform: "r" + 15}, 2000);

Where:

• r = rotation
• 15 = angle in degrees
• 2000 = time in milliseconds.

To animate rotation with given center point

You need to specify center coordinates:
yourTriangle.animate({transform: "r60" + "," + centerX + "," + centerY}, 2000);

JSFiddle example

So you have to use string as an object property: {transform: "r15"} or {transform: "r15, centerX, centerY"}.

Answer 2

Try this:

triangle.animate({rotation:"300 200 200"},1000,'<>');