CSS设置SVG从橙色到蓝绿色的fill填充动画未生效问题求助

问题原因及修复方案 #

核心问题（更新后代码的故障点） #

• 优先级冲突：你的<path>标签上写了行内样式style="fill:#ff4f00"，行内样式的优先级远高于CSS动画定义的fill属性，导致动画的颜色变更被直接覆盖，不会生效。
• 变量未定义风险：请先确认你已经在CSS全局作用域（或该SVG的父级作用域）正确定义了--secondary-color和--primary-color-lighter两个CSS变量，如果未定义，关键帧里的fill值为空，动画自然无法运行。

旧版AI导出SVG的额外问题 #

你最初贴的Adobe Illustrator导出的SVG里，#adobe_illustrator_pgf是AI私有的项目引用标识，浏览器不会渲染该元素，且你未放出SVG内实际可见的<path>/<rect>等绘图元素代码，给SVG父容器加fill动画默认不会继承到内部子元素，所以也不会生效。

修复步骤 #

1. 删掉path标签上的行内fill样式，或者将行内样式的优先级降低（推荐直接删除行内fill，用CSS统一控制）
2. 先使用实际颜色值测试排除CSS变量问题，确认动画生效后再替换为变量
3. 如果需要给SVG内所有元素统一加变色动画，可以直接选中所有子元素，不需要单独绑定ID

可直接运行的示例代码 #

/* 先确认变量已定义，这里给个示例值 */
:root {
  --secondary-color: #ff4f00;
  --primary-color-lighter: #a4f4f4;
}

@keyframes color-change {
  from {
    fill: var(--secondary-color);
  }
  to {
    fill: var(--primary-color-lighter);
  }
}
#about__main--img__fleur {
  animation: color-change 4s infinite alternate linear;
}

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >  
<!-- 删掉了行内的fill样式 -->
<path d="m 158.31488,-2.2022728 c 91.01571,130.5628628  43.85069,121.0522128 12.21,230.0500028 h 8.42 c  82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24  -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628  34.92456,17.33855 -5.51,23.74 -5.67801,35.22547  14.97807,58.61711 40.68,19.78 21.9137,62.34493  -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119  45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726  -15.31394,-61.97543 -8.59,-115.11 h -10.45 c  -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78  32.374092,54.98005 40.680002,-19.78 40.680002,-19.78  -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74  -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24  -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h  9.23 c -11.49629,-82.82875 -92.252982,-101.39727  12.21,-230.0500028" id="about__main--img__fleur" sodipodi:nodetypes="ccccccccccccccccccc" />
</svg>

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