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

- Chris

---

抱歉，我有一段时间没有看过这个问题了，但是像下面建议的那样将值固定为px似乎可以解决问题。 - Chris

@Iceberg，不，最终我们需要调整我们的网站，而不是转换那个SVG元素... - Balazs Nemeth

Answer 1

我知道现在已经晚了，但我也遇到了同样的问题。如果你使用 transform-box: fill-box;，那么在Safari中对象会正确地绕着自己的轴旋转。

- Daniel Caryll

---

目前我也遇到了同样的问题，而且使用transform:fill-box;无法解决。我发现在Safari中缩放时，所有使用此方法的示例都会出现错误行为。你能否向我提供一个示例，告诉我应该在哪个元素上应用这个方法？ - Balazs Nemeth

Answer 2

我曾遇到类似问题，通过调整SVG的视口属性来解决，这样我就可以设置。

transform-origin: 0 0;

针对我需要转换的元素。

我在这里创建了一个示例，展示了两者之间的差异：https://codepen.io/mbrrw/pen/NWxMamm

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

希望这能帮到你！

- mbrrw

---

太棒了！这就是它！但是，像你的CodePen一样，需要transform-origin: 50％，50％。 - derpedy-doo

实际上，在Safari中完全省略 transform-origin 似乎也可以正常工作。（这实际上是我以前的评论中发生的情况，因为在此属性中使用 , 是无效的。） - derpedy-doo

谢谢。那么上面的笔/解决方案是错误的吗？ - mbrrw

笔很好用！随着这个解决方案的更新，现在两者都对我有效 :) - derpedy-doo

Answer 3

我知道这是一个非常老的问题，但我花了最近一个小时来想出一个解决方案，并且我想分享我的解决方案，以防它发生在任何其他人身上！

就像原始贴子一样，在Safari中缩放会损坏我的transform-origin，并且它们将基于SVG预缩放的原始大小。 在我的示例中，我尝试使用100％ 0％的transform-origin进行旋转。

我的解决方法（使用Javascript）：transform-origin：svgElem.currentScale * 100 +''％0％';

现在，我的旋转不会偏离轴心，而是总是在正确的位置。

希望这可以帮助某些人！

- Austin Spaeth

Answer 4

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

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

我不确定这个方法能否解决你的Safari问题，但是这是一个好的实践。特别是如果你希望它在Firefox中也能正常工作。

- Paul LeBeau

Answer 5

我使用rem单位来设置transform-origin，已经解决了这个问题。

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

现在，在Safari上缩放时，动画始终保持居中。

（除了最小的缩放级别，我认为这是可以接受的）

- Maxime Lechevallier