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

Chrome对transform-origin的实现与其他浏览器不同。尝试使用绝对坐标。

-webkit-transform-origin: 201px 191px;
transform-origin: 201px 191px;

我不确定这是否会解决您的 Safari 问题，但无论如何这是一个很好的做法。特别是如果您希望它也能在 Firefox 中工作。

Answer 2

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

Answer 3

我有一个类似的问题，我可以通过调整 SVG 的视口属性来解决这个问题，这样我就可以设置

transform-origin: 0 0;

对于我需要转换的元素。

我在这里创建了一支笔来显示两者之间的区别：https://codepen.io/mbrrw/pen/NWxMamm

对于 20x20 的圆，我将 viewBox 从 0,0,20,20 更改为 -10, -10, 20, 20。

希望这对您有所帮助！

Answer 4

我知道这是一个非常古老的问题，但我花了最后一个小时试图提出一个解决方案，我想分享我的解决方案以防其他人遇到这种情况！

就像 OP 一样，在 Safari 中放大或缩小会搞砸我的变换原点，它们将基于 SVG 预缩放的原始大小。在我的示例中，我尝试使用 100% 0% 的变换原点进行旋转。

我的修复（使用 Javascript）：transform-origin: svgElem.currentScale * 100 + '% 0%';

现在，我的旋转不再是离轴的，而是始终处于正确的位置。

希望对大家有所帮助！

Answer 5

我使用 rem 单元修复它以设置 transform-origin。

.logo-spinner path {
    animation: my-spinning-animation 1.8s infinite ease;
    transform-origin: 3rem 3rem;
}

现在，在 Safari zooming-in/out 上，动画始终保持居中。

（我认为可以接受的最小缩放级别除外）

Safari SVG 变换原点缩放动画

Safari SVG transform-origin zoom animation

safari

animation

svg

css-transforms