为何链接内的@keyframes动画在Safari浏览器中无法生效？

问题场景 #

将带有CSS动画的内联SVG放在<a>标签内时，动画在Chrome等浏览器正常运行，但在Safari中完全失效，相关代码结构如下：

<div class="logo-header__new">
  <a href="/">
    <svg width="231" height="40" viewBox="0 0 231 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <!-- 内部包含多个带logo-header__letter-color类的path元素 -->
    </svg>
  </a>
</div>

.logo-header__letter-color {
    animation: logo-animation-toscroll 3s infinite;
}

@keyframes logo-animation-toscroll {
    0% {
        fill: #398bea;
    }
    50% {
        fill: #fdc046;
    }
    100% {
        fill: #398bea;
    }
}

可能的原因及解决办法 #

• SVG根元素的fill属性压制动画
  Safari中，SVG根元素设置的fill="none"会被子元素继承，且优先级高于CSS动画中的fill值。解决办法是给目标路径元素显式设置初始fill值，强制覆盖继承属性：

  .logo-header__letter-color {
      fill: #398bea; /* 显式设置初始fill */
      animation: logo-animation-toscroll 3s infinite;
  }
  

• 缺少WebKit前缀（针对旧版Safari）
  Safari 14及更早版本需要给CSS动画和关键帧添加-webkit-前缀才能识别，补充前缀后兼容性更强：

  .logo-header__letter-color {
      fill: #398bea;
      -webkit-animation: logo-animation-toscroll 3s infinite;
      animation: logo-animation-toscroll 3s infinite;
  }
  
  @-webkit-keyframes logo-animation-toscroll {
      0% { fill: #398bea; }
      50% { fill: #fdc046; }
      100% { fill: #398bea; }
  }
  
  @keyframes logo-animation-toscroll {
      0% { fill: #398bea; }
      50% { fill: #fdc046; }
      100% { fill: #398bea; }
  }
  

• CSS选择器针对性不足
  Safari对SVG内部元素的CSS选择器匹配更严格，建议明确指定选择器范围，避免样式被其他规则干扰：

  .logo-header__new svg .logo-header__letter-color {
      fill: #398bea;
      -webkit-animation: logo-animation-toscroll 3s infinite;
      animation: logo-animation-toscroll 3s infinite;
  }
  

额外注意 #

如果后续改用外部SVG文件（比如通过<img>或背景图引入），Safari不支持外部SVG的CSS动画，必须保持内联SVG才能生效。

内容的提问来源于stack exchange，提问作者Petr Savenok