SVG 动画与 Safari 13.1 斗争 (Mac OS & IOS)

Question

我刚刚意识到 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

Answer 1

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

的对象

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

Answer 2

我在 Safari 和 iOS 上也遇到了类似的问题。我通过使用 <img> 标签而不是 in-lining <svg> 并对其应用 CSS 动画来解决它。

SVG 动画与 Safari 13.1 斗争 (Mac OS & IOS)

SVG animation struggles with Safari 13.1 (Mac OS & IOS)

css

svg

safari

css-animations

svg-animate