title: Raphael 2.0 - how to correctly set the rotation point
body: <p>I don't understand how to rotate my object at a certain point. This is the javascript I have </p>
  
  <pre><code>            // create needle 
              var rsr = Raphael('rsr', '320', '240'); 
              var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
              4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
              '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
              'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
              opacity": '1',"stroke-dasharray": 'none'}); 
  
              needle.rotate(0); 
              needle.transform("t0,-812.36218").data('id', 'needle'); 
  
              // get needle bounding box 
              var needleBox = needle.getBBox(); 
  
              // calculate rotation point (bottom middle)
              var x_rotate_point = needleBox.x + (needleBox.width/2); 
              var y_rotate_point = needleBox.y + needleBox.height; 
  
              // rotate needle
              needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
              +","+y_rotate_point}, 6000); 
  
              // Creates circle at rotation point 
              var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
              circle.attr("fill", "#f00"); 
              circle.attr("stroke", "#fff"); 
  </code></pre>
  
  <p>I have created a dummy circle to check if my coordinates of my center point is correct 
  and it is, but it doesn't rotate around that point :-/ </p>
  
  <p>When I created gauges in different frameworks that always seemed the way to go, but that logic doesn't seem to translate well into Raphael 2.0.</p>
  
  <p>I did google for it and found some entries but the problem seems it is for 
  older versions which doesn't translate well because a lot of 
  stuff got changed or is deprecated. </p>