SVG 动画在 Safari 13.1 (Mac OS & IOS) 中遇到问题

Posted

技术标签:

【中文标题】SVG 动画在 Safari 13.1 (Mac OS & IOS) 中遇到问题【英文标题】:SVG animation struggles with Safari 13.1 (Mac OS & IOS) 【发布时间】:2020-07-13 11:33:54 【问题描述】:

我刚刚意识到 macOS 10.15.4 和 ios 13.4 附带的最新版本的 Safari (v13.1) 不再支持 SVG 文件中的 css 动画。 我使用这个技巧在我的投资组合上显示加载动画。现在只显示 sag 文件的第一帧,并且动画没有开始。 https://jbkaloya.com

Chrome 或 Firefox 没有问题。

编辑

这是文件嵌入页面的相应 CSS 属性

.loading 
  background-color: $black-color;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  z-index: 1100;
  opacity: 1;
  transition: opacity .4s 0s cubic-bezier(.455,.03,.515,.955), z-index 0s 0s linear;
  
  &::before 
    content: '';
    background-image: url(../images/logoanimated.svg);
    background-position: center;
    background-repeat: no-repeat;
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 22rem;
	margin: auto;
	left: 0;
	right: 0;
  

我猜它也可能与那些属性有关(位于 svg 文件中并启动动画序列)

    
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
      

只有我一个人关心这个问题吗?

Safari 13.1 更新日志:https://developer.apple.com/documentation/safari_release_notes/safari_13_1_beta_release_notes

【问题讨论】:

用你的测试用例向 webkit bugtracker 报告一个 webkit bug。 你在说什么? SMIL 多年来一直不支持! @MisterJojo SMIL 在 Firefox、Chrome 和 Safari 中受支持。然而,这个问题是关于 CSS 动画而不是 SMIL。 你应该生成一个最少的代码来说明你的问题,而不是一个包含数百行代码的整个网站,以了解你在说什么 @MisterJojo 没错,感谢您的反馈。我已经编辑了我的帖子以使其更易于理解 【参考方案1】:

我遇到了类似的问题。为了解决这个问题,我使用了一个类型设置为 image/svg+xml 的对象。

<object type="image/svg+xml" data="animation/some.svg">

【讨论】:

非常感谢!那工作得很好。你知道技术原因吗? @Jean-BaptisteKaloya 我不知道具体是什么,但是当嵌入 &lt;img&gt; 标记时,SVG 图像不允许执行某些操作.我肯定知道的是不允许他们从外部资源加载东西,例如网络字体。我会说有人在 webkit 上处理这段代码,不小心引入了回归。【参考方案2】:

我在 Safari 和 iOS 上也遇到了类似的问题。我通过使用&lt;img&gt; 标签而不是内联&lt;svg&gt; 并对其应用CSS 动画来解决它。

【讨论】:

以上是关于SVG 动画在 Safari 13.1 (Mac OS & IOS) 中遇到问题的主要内容,如果未能解决你的问题,请参考以下文章

SVG 线条动画在 Safari 中反转?

Safari SVG 变换原点缩放动画

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

为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用?

SVG 矩形在 Firefox 中而不是 Chrome/Safari 中组合在一起

SVG 的 Safari 移动部分