gpt4 book ai didi

css - SVG 动画在 Safari 13.1 (Mac OS & IOS) 中挣扎

转载 作者:行者123 更新时间:2023-12-04 00:57:45 27 4
gpt4 key购买 nike

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

Safari 13.1

Chrome 或 Firefox 没有问题。

Chrome (working)

编辑

这是文件嵌入页面的相应 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

最佳答案

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

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

关于css - SVG 动画在 Safari 13.1 (Mac OS & IOS) 中挣扎,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60975613/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com