title: Calling scale, but SVG element also translating
body: <p>I have this <a href="http://jsfiddle.net/blasphemous_aesthete/m052oxrv/1/" rel="nofollow">fiddle</a> where I am trying to scale the orange circle around its center (using javascript), that is, it must expand with origin set to its center. However, something is causing it to scale and also move, i.e. causes translation.</p>
  
  <p>While the same thing would work fine in pure CSS environment as shown for the green circle</p>
  
  <p>In both cases, I've fixed the transform-origin using CSS like this:</p>
  
  <pre><code>#Orange, #Orange *{
    transform-origin:140px 300px;
  }  
  </code></pre>
  
  <p>Can anyone help? I want to scale it from the script for a larger animation sequence and the amount of scaling is dynamic (like a transition in 2 seconds).</p>