SVG颜色无法修改主因是未内联或内联后保留内联fill属性：<img>引入时DOM隔离，<path fill="#000">优先级高于CSS，且svg { fill: currentColor }不继承给子元素，须显式设置path, circle { fill: currentColor }并确保父容器有color值。
直接写 fill: red 或 fill: currentColor 却没反应，90% 是因为 SVG 根本没进 DOM 或被内联属性锁死了值——不是 CSS 写错了，是作用对象不存在或被覆盖。
SVG 是 <img src="icon.svg"> 引入的
这种写法下，SVG 是独立文档上下文，DOM 完全隔离。你写的 img path { fill: red; } 不会匹配任何节点，fill 对 <img> 本身也不是合法 CSS 属性。
- 浏览器不解析其内部结构，
fill、stroke、currentColor全部失效 - 想控制颜色，必须改用内联 SVG：
<svg><path d="..."></svg> - 或者用
mask-image模拟单色换色（仅适用于纯色图标，不支持描边）
<path> 上有 fill="#000" 这类内联属性
HTML 属性优先级高于 CSS，fill="red" 会直接覆盖你写的 fill: currentColor。开发者工具里能看到该属性被 strikethrough，但 computed style 里还是黑色。
- 打开 Elements 面板，逐层点开
<svg> → <path>，确认节点上已没有fill或stroke属性 - 用正则批量删掉：
fill="[^"]*"、stroke="[^"]*"（保留d、viewBox等结构属性） - Figma / Illustrator 导出时，关闭“导出颜色属性”；SVGR 可配
{ removeAttrs: { attrs: 'fill|stroke' } }
只写了 svg { fill: currentColor }，但没作用到子元素
<svg> 标签本身不渲染图形，真正要填色的是 <path>、<circle> 等子元素。只给 <svg> 设 fill，子元素不会自动继承（除非显式写 fill="currentColor" 在根标签上）。
立即学习“前端免费学习笔记（深入）”；
- 必须写具体选择器：
svg path, svg circle, svg polygon { fill: currentColor; } - 描边同样要处理：
svg path, svg circle { stroke: currentColor; } - 如果父容器没设
color（哪怕只是color: inherit;），currentColor就会退到浏览器默认黑
用了 <use href="#icon"> 但没透传 currentColor
<use> 默认不继承 currentColor，它引用的是原始 <symbol> 定义，而定义里的 fill 是静态的。
-
<symbol>内部所有路径必须无fill属性，或显式写fill="currentColor" - 包裹
<use>的<svg>必须加 class，例如<svg class="icon"><use href="#check"></svg> - CSS 要写成
.icon { fill: currentColor; }，而不是.icon svg { fill: currentColor; }（选择器太深，不生效）
最常被忽略的一点：SVG 不是图片，它是 DOM 树。任何跳过开发者工具逐层检查 <path> 上是否还有残留 fill 属性、computed style 是否真来自你写的那条 CSS 规则的做法，都会在换主题或加新组件时突然崩掉。
