Safari SVG 变换原点缩放动画

Posted

技术标签:

【中文标题】Safari SVG 变换原点缩放动画【英文标题】:Safari SVG transform-origin zoom animation 【发布时间】: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 元素... 【参考方案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 上放大/缩小时动画始终保持居中。

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

【讨论】:

以上是关于Safari SVG 变换原点缩放动画的主要内容,如果未能解决你的问题,请参考以下文章

Safari 上涉及不透明度、缩放和 translateY 问题的 CSS 动画

以光标位置为变换原点缩放 SVG

Safari 中的 SVG 缩放问题

Safari 中的 SVG 动画

如何相对于其中心点旋转或缩放(变换)SVG 路径?

Safari 错误。当尝试使用模糊过滤器为 svg 转换设置动画时,safari 非常滞后