Safari 中的 SVG 动画

Posted 2023-03-28

【中文标题】Safari 中的 SVG 动画

【英文标题】：SVG animation in Safari

【发布时间】：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   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   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 仍然无法工作

【参考方案1】：

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

const staranimation = keyframes`
 ...
`

然后

animation: $staranimation 4s linear infinite;