SVG动画在Safari 13.1(Mac OS&IOS)中挣扎 [英] SVG animation struggles with Safari 13.1 (Mac OS & IOS)

问题描述

我刚刚意识到macOs 10.15.4和iOS 13.4随附的最新版Safari(v13.1)不再支持SVG文件中的CSS动画. 我使用此技巧在我的投资组合中显示加载动画.现在，仅显示sag文件的第一帧，并且动画不会开始. https://jbkaloya.com

I just realized that the latest version of Safari (v13.1) that comes with macOs 10.15.4 and iOS 13.4 doesn't support css animations in SVG files anymore. I use this trick to display a loading animation on my portfolio. Now only the first frame of the sag file is display and the animation doesn't start. https://jbkaloya.com

Chrome或Firefox没有问题.

No issues with Chrome or Firefox tho.

编辑

以下是文件在页面中嵌入位置的相应CSS属性

Here's the corresponding CSS properties in where the file is embedded in the page

.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文件中并启动动画序列)有关

I guess it can also be related to those properties (that are located in the svg file and that start the animation sequence)

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

我是这个问题唯一关心的吗?

Am I the only one concern by this issue ?

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

Safari 13.1 changelog: https://developer.apple.com/documentation/safari_release_notes/safari_13_1_beta_release_notes

推荐答案

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

I had a similar issue. To resolve, I utilized an object with type set to image/svg+xml.

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

这篇关于SVG动画在Safari 13.1(Mac OS&IOS)中挣扎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！