Safari 中的 SVG 动画

Question

我有一个 SVG 星星动画，它可以在 Chrome 和 Firefox 中使用，但不能在 Safari 桌面或移动设备中使用。

有人知道为什么它无法在 Safari 中启动吗？

关键帧也适用于 webkit

@keyframes staranimation {
  10% {
    stroke-dashoffset: 100;
    stroke: #a98f22;
    opacity: 1;
  }
  30% {
    opacity: 1;
    fill: #a98f22;
  }
  60% {
    opacity: 0.3;
    fill: #a98f22;
  }
  80% {
    opacity: 0.6;
    fill: #a98f22;
  }
  100% {
    opacity: 1;
    fill: #a98f22;
    stroke: #a98f22;
  }
}

.star {
    polygon {

    &.fillfirst{
      stroke: #fff;
      -webkit-stroke: #fff;
      stroke-width: 1;
      -webkit-stroke-width: 1;
      fill: #ffff00;
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      animation-delay: 0.5s;
      animation-delay: 0.5s;
    }
    &.fillsecond {
      stroke: #fff;
      stroke-width: 1;
      fill: #ffff00;
      /* stroke-dasharray: 20;
      stroke-dashoffset: 200; */
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      animation-delay: 1s;
    }
   }
  }


<div className="stars">
  <svg height="45" width="23" className="star">
    <polygon className='fillfirst' points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
  </svg>
  <svg height="45" width="23" className="star">
    <polygon className='fillsecond' points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
   </svg>
 </div>

Answer 1

通过从 styled-components 导入关键帧解决了我的问题。

const staranimation = keyframes`
 ...
`

然后

animation: ${staranimation} 4s linear infinite;

Safari 中的 SVG 动画

SVG animation in Safari

safari

animation

svg