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 应设置为圆的半径（在本例中为 250 像素）所有维度(x, y 和 z).

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

Internet Explorer CSS 旋转摆动

Internet Explorer CSS rotation wobble

css

internet-explorer

svg

css-transforms

css-animations