Velocity JS SVG transform origin issue in Firefox

Question

I would like to rotate an SVG group from the center using transform-origin: 50% 50%; using Velocity JS. This works fine in Chrome but I've noticed that the transform origin is wrong in IE and Firefox. 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?

I have a demo here http://codepen.io/styler/pen/wBRPEa?editors=101

Code snippet

CSS

.box {
  transform-origin: 50% 50%;
}

JS

var box = document.querySelector('.js-box');    
setInterval(function() {
  Velocity(box,
    {
      rotateZ: 0
    },
    {
      duration: 600
    },
    "easeIn"
  );
  Velocity(box,
    {
      rotateZ: 360
    },
    {
      duration: 1200
    },
    "easeOut"
  );
}, 2200);

I've tried rotating a plain div and the correct transform-origin works fine, seems to be SVG related.