Raphael.js Animation of a rotation of a path with a given center point

Question

I am trying to animate a triangle (I think the needle is an angular sensor) so that it rotates at a given point (see 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 animation) along this center in order:

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

But I can’t understand for life how to revive the rotation so that it revolves around this point. It seems to rotate in the middle of the path.

Any help?

Answer 1

Try the following:

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

Answer 2

Since version Raphael.js 2.0

To animate a simple rotation, you can use:

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

Where:

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

Animation of rotation with a given center point

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

JSFiddle example

Thus, you should use the string as a property of the object: {transform: "r15"} or {transform: "r15, centerX, centerY"} .

Answer 3

Turning a path around a given point, for example. end of line, use this:

 rapahel.path.animate({transform: "r60,100,100"}, 1000, "<>");