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