小编Jea*_*oya的帖子

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

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

Run Code Online (Sandbox Code Playgroud)

css safari svg css-animations svg-animate

Jea*_*oya

2020 04-02

3
推荐指数

1
解决办法

3476
查看次数