Safari SVG 变换原点缩放动画

Question

我有一个正在动画的内联 SVG，但是当您在浏览器中放大或缩小时，正在旋转的对象不再在其中心点旋转。

它在 Chrome 中运行良好。

http://codepen.io/chrismorrison/pen/rmLXWw

#rays {
  animation: spin 6s linear infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}

Answer 1

我知道这已经晚了，但我发现了同样的问题。如果使用transform-box: fill-box;，对象将在 Safari 中正确地绕其轴旋转。