我刚刚意识到,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
我有一个类似的问题。为了解决这个问题,我使用了一个类型设置为image / svg + xml的对象。
<object type="image/svg+xml" data="animation/some.svg">