title: Raphael.js Animate the rotation of a path with a given center point
body: <p>I'm trying to animate triangle (think, needle of an angular gauge) such that it rotates at a given point (see the red dot).</p>
  
  <pre><code>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,'&lt;&gt;');
  // doesn't work
  </code></pre>
  
  <p><a href="http://jsfiddle.net/BS6j6/1/" rel="nofollow noreferrer">JSFiddle Example</a></p>
  
  <p>I can rotate (without animating) along that center fine:  </p>
  
  <pre><code>// to rotate with center point 200,200, works fine
  triangle.rotate(80,200,200);
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help?</p>