Safari SVG 变换原点缩放动画答案

【问题标题】：Safari SVG transform-origin zoom animationSafari SVG 变换原点缩放动画
【发布时间】：2017-09-24 08:10:02
【问题描述】：

我有一个内嵌的 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;
  }
}

【问题讨论】：

抱歉，我已经有一段时间没有看到这个了，但是 px 的固定值似乎可以按照下面的建议工作。
@Iceberg，不，最后我们需要调整我们的网站，不要转换那个 SVG 元素...

标签： animation svg safari css-transforms

【解决方案1】：

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

【讨论】：

我现在确实有同样的问题，我无法用transform:fill-box; 解决。当我在 Safari 中放大/缩小时，我发现的所有示例都表现错误。你能不能给我一个我需要应用它的iteam的例子？

【解决方案2】：

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

transform-origin: 0 0;

对于我需要转换的元素。

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

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

希望这会有所帮助！

【讨论】：

太棒了！这样做！ transform-origin: 50%, 50% 是必需的，因为您的 CodePen 使用。
实际上，在 Safari 中忽略 transform-origin 完全可以正常工作。（这实际上是我之前评论中发生的事情，因为使用 , 对此属性无效。）
嗯，谢谢。那么上面的笔/解决方案错了吗？
笔很好用！有了这里的解决方案更新，现在两者都对我有用:)

【解决方案3】：

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

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

我不确定这是否能解决您的 Safari 问题，但无论如何这是一个好习惯。特别是如果您希望它也可以在 Firefox 中运行。

【讨论】：

【解决方案4】：

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

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

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

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

希望对某人有所帮助！

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：