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