svg内联fill/stroke属性优先级高于css，导致样式失效；需删除内联属性、改用内联svg或mask-image；fill:currentcolor需父元素显式设置color；须同时处理stroke并验证computed value。
内联属性优先级高于CSS
最常见的失效原因是 SVG 源码里自带 fill="#000" 或 fill="red" 这类内联属性——浏览器按“行内样式 > 外部 CSS”规则处理，你写的 fill: currentColor 或 fill: blue 直接被忽略。不是 CSS 写错了，是 DOM 节点上已经锁死了值。
实操建议：
- 打开开发者工具 Elements 面板，逐层点开
<svg></svg>→<path></path>，确认节点上已没有fill或stroke属性 - 用文本编辑器批量删掉所有
fill="[^"]*"、stroke="[^"]*"（保留d、viewBox等结构属性） - 如果用 Figma/Illustrator 导出，导出前关闭“导出颜色属性”选项；或配置 SVGR 的
svgoConfig自动清理：{ removeAttrs: { attrs: 'fill|stroke' } }
引入方式导致 CSS 完全不可达
<img src="icon.svg"> 引入的 SVG 是独立文档上下文，DOM 隔离，img path { fill: red; } 根本不会匹配任何节点。浏览器不解析其内部结构，fill 对 <img> 本身也不是合法 CSS 属性。
可行替代方案：
- 改用内联 SVG：把 SVG 源码完整粘贴进 HTML，变成
<svg><path d="..."></path></svg>形式 - 用
mask-image模拟单色换色：.icon { background-color: currentColor; mask-image: url(icon.svg); -webkit-mask-image: url(icon.svg); }（不支持描边、渐变） - 构建时转成组件（如 SVGR），避免手动处理 DOM 层级
currentColor 没有继承源
fill: currentColor 不是自动响应文字色，它只是取父元素计算后的 color 值。如果父容器没设 color，它就回退到浏览器默认黑色（常是 rgb(0, 0, 0)），看起来像“没变”。
关键检查点：
- 父容器必须显式声明
color，哪怕只是color: inherit;，不能依赖未定义状态 -
<svg></svg>标签本身不自动继承color，需确保color设置在某一级祖先或<svg></svg>自身上 - 不要只写
svg { fill: currentColor; }——<svg></svg>不渲染图形，真正要填色的是<path></path>、<circle></circle>等子元素，必须加path, circle { fill: currentColor; }
描边（stroke）被遗漏
很多图标同时含填充和描边，但 fill: currentColor 只影响填充区域。如果原始 SVG 有 stroke="#333"，清除后没补 stroke: currentColor，hover 或主题切换时描边就会卡在旧色上，视觉突兀。
安全写法：
- 统一清理所有
stroke内联属性 - CSS 中同步声明：
path, circle, rect { stroke: currentColor; } - Tailwind 用户可直接用
stroke-current（v3.3+），旧版需手动覆盖
fill 的 computed value 确实来自你写的那条 CSS 规则，而不是被 Shadow DOM、scoped style、<use></use> 作用域或未生效的变量截断了。跳过这步，所有“套个 class 就变色”的假设都会在线上环境崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
