桌面端Safari中SVG的Keyframe动画fill属性不生效的纯CSS方案咨询

问题原因 #

桌面端Safari对SVG根元素的fill属性关键帧动画支持存在原生缺陷，同时对无前缀的@keyframes规则识别度较低，是导致该问题的核心原因。

兼容方案 #

以下方案无需JavaScript即可实现全浏览器兼容：

• 方案一：补充前缀规则+绑定动画到内部路径元素
  1. 新增带-webkit-前缀的@keyframes声明
  2. 把动画绑定到SVG内部的path等可绘制元素，而非SVG根节点
  3. 给目标路径显式设置初始fill值
     修改后的代码如下：

  CSS代码 #

  /* 给path绑定动画，而非svg元素 */
  svg path {
    fill: red; /* 显式设置初始fill */
    -webkit-animation: logo-color 20s infinite linear;
    animation: logo-color 20s infinite linear;
  }
  /* 补充带webkit前缀的关键帧 */
  @-webkit-keyframes logo-color {
    0% {
      fill: red;
    }
    50% {
      fill: green;
    }
    100% {
      fill: red;
    }
  }
  @keyframes logo-color {
    0% {
      fill: red;
    }
    50% {
      fill: green;
    }
    100% {
      fill: red;
    }
  }
  

  HTML代码无需修改。
• 方案二：用color属性动画兼容（适合多路径统一修改场景）
  如果SVG内存在多个需要同步变色的路径，可以利用Safari对color属性动画的良好支持，配合currentColor实现fill动画：

  svg {
    color: red; /* 初始颜色定义在color属性 */
    -webkit-animation: logo-color 20s infinite linear;
    animation: logo-color 20s infinite linear;
  }
  svg path {
    fill: currentColor; /* fill绑定当前color值 */
  }
  @-webkit-keyframes logo-color {
    0% {
      color: red;
    }
    50% {
      color: green;
    }
    100% {
      color: red;
    }
  }
  @keyframes logo-color {
    0% {
      color: red;
    }
    50% {
      color: green;
    }
    100% {
      color: red;
    }
  }
  

两个方案均已兼容所有主流浏览器，包括桌面端Safari所有支持CSS动画的版本。

内容的提问来源于stack exchange，提问作者John Dunkel