Javascript Firefox和IE中的Velocity JS SVG转换源问题

我想使用

变换原点：50%50%从中心旋转
SVG组
使用Velocity JS。这在Chrome中运行良好，但我注意到在IE和Firefox中转换原点是错误的。我尝试过设置一个额外的变换原点值，也尝试过将变换原点设置为像素而不是%etc，但没有成功。有人能解释一下如何解决这个问题吗

我这里有一个演示

代码片段

CSS

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

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

JS

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

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

我试过旋转一个普通的
div
，正确的转换原点工作正常，似乎与SVG相关。
Firefox不支持SVG内容的百分比转换原点。使用一些其他的单元来提高IE和firefox（以及chrome）的性能，我只使用CSS转换矩阵而不是SVG转换属性…即使FF支持百分比，它仍然使用不同的
转换源
实现-另请参见-CSS转换矩阵和SVG转换在Firefox和Chrome中具有相同的性能。