在Firefox和IE中，Velocity JS SVG转换起源问题

Question

我想使用Velocity JS使用SVG group从中心轮换transform-origin: 50% 50%;。这在Chrome中运行良好，但我注意到IE and Firefox中的转换原点是错误的。我已经尝试设置一个额外的变换原点值，并尝试将变换原点设置为像素而不是％等，但没有运气。任何人都可以解释如何解决这个问题吗？

我在这里有一个演示http://codepen.io/styler/pen/wBRPEa?editors=101

代码段

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);

我试过旋转普通div并且正确的transform-origin工作得很好，似乎与SVG有关。