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

推荐答案

我知道这已经晚了，但我发现了同样的问题.如果您使用 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屋！