我有一个正在进行动画处理的内联 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;
}
}
最佳答案
我知道这已经晚了,但我发现了同样的问题。如果您使用 transform-box: fill-box;
,该对象将在 Safari 中正确绕其轴旋转。
关于animation - Safari SVG 变换-原点缩放动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43642391/