Safari 中的 SVG 动画答案

【问题标题】：SVG animation in SafariSafari 中的 SVG 动画
【发布时间】：2021-10-25 22:38:22
【问题描述】：

我有一个 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>

【问题讨论】：

不是className="..."，只是class="..."（在SVG和多边形上）。
在 React 类中是 className
在 safari 中曾经有过这个错误，如果您最后按顺序声明了 -webkit-animation，它期望匹配的 -webkit-keyframes。所以我会完全摆脱-webkit-animation，看看它是否能解决这个问题。
没有 -webkit-animation 仍然无法工作

标签： animation svg safari

【解决方案1】：

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

const staranimation = keyframes`
 ...
`

然后

animation: ${staranimation} 4s linear infinite;

【讨论】：