title: CSS transformOrigin property not working as expected
body: <p>I have an svg with some regions that need to be zoomed when I click. I used the css transformOrigin property and set it to the coordinates of my mouse click So i can scale the image around this point. Instead when the svg scales, it is offset by few pixels from the point where I clicked. Is there something I missing here? </p>
  
  <pre><code>$(document).ready(function(){   
  $('g').click(function(e){
          var x = e.clientX;
          var y = e.clientY;
          $('g.states').css({'transformOrigin': x+' '+y});
          $('g.states').transition({scale: "2"});     
      })
      $('#zoomout').click(function(){
          $('g.states').transition({scale:"1"});
      })
  });
  </code></pre>
  
  <p>the <code>.transition</code> method is part of the <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jquery transit</a> library.</p>