fill属性不生效的主因是svg引入方式不当或样式优先级冲突；内联svg才支持css控制fill，而img引入的svg完全不可控，且行内fill属性优先级高于css，需用currentcolor或!important解决。
fill 属性不生效？检查 SVG 是否内联或被 CSS 重置
SVG 的 fill 只对内联 SVG（即直接写在 HTML 中的 <svg></svg>）或通过 <object></object>/<iframe></iframe> 加载且允许样式注入的 SVG 有效；用 <img src="icon.svg" alt="CSS颜色与SVG填充_使用fill属性控制矢量图形色彩" > 方式引入时，外部 CSS 完全无法控制其 fill，这是最常被忽略的前提。
- 内联 SVG 中，
fill可以写在元素上（如<circle fill="red"></circle>），也可用 CSS 控制（如svg circle { fill: blue; }） - 若 SVG 文件本身已带
fill="black"行内属性，它会优先于外部 CSS —— 此时需加!important或改用fill: currentColor配合color继承 - 某些图标字体或雪碧图 SVG 工具导出时默认加了
fill="none"或fill-rule="evenodd"，得手动删或覆盖
CSS 中设置 fill 需要显式声明 color 或 currentColor
纯 SVG 元素没有“文本颜色”概念，fill 不会自动继承父级 color，除非你主动设为 currentColor。这是实现主题色切换最轻量的方式，但很多人直接写 fill: red 后发现换主题失效。
-
svg path { fill: currentColor; }+ 父容器设color: #333，就能让 SVG 随文字色变化 - 不要依赖浏览器默认值：未设
fill的<path></path>默认是black，但未设stroke就是none，行为不一致 - 伪类如
:hover下改fill时，记得同时处理stroke（如果存在），否则描边可能突兀残留
fill-opacity 和 opacity 的区别直接影响交互体验
fill-opacity 只降低填充色透明度，不影响描边、文字或子元素；而 opacity 是整个元素及其所有后代一起变透明。做 hover 效果或禁用态时，选错会导致意外视觉 bug。
- 按钮禁用时想让图标变灰又半透，该用
fill: #999; fill-opacity: 0.6;，而不是opacity: 0.6（后者会让整个按钮内容模糊） -
fill-opacity: 0和fill: transparent效果相似，但前者仍占渲染空间、可响应事件；后者在部分旧浏览器中可能被当空值忽略 - 动画中避免对
opacity做过渡（性能差），优先用fill-opacity或transform
SVG 导出工具生成的 fill 值常含命名色或 RGB，影响维护
Figma / Sketch 导出 SVG 时默认把 #ff0000 写成 red，或把渐变转成内联 <defs></defs>，导致 CSS 无法批量控制颜色，也增大体积。
立即学习“前端免费学习笔记（深入）”；
- 用
svgo压缩时加--convert-colors参数，强制转命名色为十六进制 - 避免导出带
fill="url(#a)"的渐变引用——CSS 无法修改这种引用，得提前扁平化或改用 CSS 渐变模拟 - 团队协作时统一约定：SVG 文件只保留结构，所有
fill、stroke全部删掉，由 CSS 单独管理
真正麻烦的不是填什么颜色，而是 SVG 被封装在哪一层、有没有被其他样式劫持、以及是否还在用 <img alt="CSS颜色与SVG填充_使用fill属性控制矢量图形色彩" > 引入却幻想用 CSS 控制它。
