Internet Explorer CSS旋转摆动

Question

我有一个SVG元素，里面有一个圆圈。使用关键帧动画无限旋转SVG：

@keyframes rotate {
  0%       { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%     { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

svg{
  width: 500px;
  height: 500px;
  display: block;
  animation: rotate 2.9s linear infinite;
  transform-origin: center;
}

我的问题是，在Internet Explorer 11上，旋转似乎在旋转时略微摇摆（所有其他浏览器的行为与预期一致）。尝试着重于黑匣子的顶部或左边缘。

有什么方法可以避免这种情况吗？

Here's a fiddle with the test scenario.

下面是一个展示它的gif：

Answer 1

如果有人想知道，以下是我设法解决这个问题的方法：SVG的transform-origin应该设置为圆的半径（在这种情况下为250px）的所有维度（x ，y和z）。

svg{
  /* other styles go here */
  transform-origin: 250px 250px 250px;
}