Safari SVG变换原始缩放动画 [英] Safari SVG transform-origin zoom animation

问题描述

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

I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.

在Chrome中正常运行。

It works fine in 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;
  }
}

推荐答案

I知道这很晚，但是我发现了同样的问题。如果您使用 transform-b​​ox：fill-box; ，则该对象将在Safari中沿其轴正确旋转。

I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.

这篇关于Safari SVG变换原始缩放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！