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

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

Answer 2

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

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

我不确定这是否会解决您的Safari问题，但无论如何这都是很好的做法。特别是如果你想在Firefox中使用它。

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）：转换源：svgElem.currentScale * 100 +'％0％';

现在，它不再位于轴外，而是始终处于正确的位置。

希望能对某人有所帮助！

Safari SVG变换原点缩放动画

4 个答案: