title: Velocity JS SVG transform origin issue in Firefox and IE
body: <p>I would like to rotate an <code>SVG group</code> from the center using <code>transform-origin: 50% 50%;</code> using Velocity JS. This works fine in Chrome but I've noticed that the transform origin is wrong in <code>IE and Firefox</code>. I've tried setting an extra transform origin value and also tried setting the transform origin as pixels instead of % etc but with no luck. Can anyone explain how to fix this problem?</p>
  
  <p>I have a demo here <a href="http://codepen.io/styler/pen/wBRPEa?editors=101" rel="nofollow">http://codepen.io/styler/pen/wBRPEa?editors=101</a></p>
  
  <p><strong>Code snippet</strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.box {
    transform-origin: 50% 50%;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var box = document.querySelector('.js-box');    
  setInterval(function() {
    Velocity(box,
      {
        rotateZ: 0
      },
      {
        duration: 600
      },
      "easeIn"
    );
    Velocity(box,
      {
        rotateZ: 360
      },
      {
        duration: 1200
      },
      "easeOut"
    );
  }, 2200);
  </code></pre>
  
  <p>I've tried rotating a plain <code>div</code> and the correct transform-origin works fine, seems to be SVG related.</p>