SVG必须内联且清除内联fill/stroke属性，才能通过CSS控制颜色；使用currentColor或CSS变量时需确保作用域正确，多色图标须为各path单独设class。
SVG必须内联，否则CSS完全失效
用 <img src="icon.svg"> 或 background-image: url(icon.svg) 引入的 SVG，fill、stroke 一个都改不了——浏览器把它当位图处理，DOM 里根本看不到 <path>。只有把 SVG 源码直接粘贴进 HTML（即内联），路径元素才成为可选中的 DOM 节点。
常见错误现象：.icon:hover path { fill: red; } 不生效，八成是 SVG 没内联，或者用了 <use href="#xxx"> 但 <symbol> 定义在外部文件里。
- ✅ 正确做法：复制 SVG 文件内容，粘贴为
<svg><path d="..."></path></svg> - ✅
<use>可用，但前提是<symbol id="xxx">在当前页面 DOM 中（比如藏在<svg style="display:none">里） - ❌
<object>、<iframe>、外部<use href="file.svg#xxx">全部无效
删掉所有内联 fill/stroke，否则 CSS 被无视
设计工具导出的 SVG 常带 fill="#000" 或 stroke="blue" 这类行内属性，它们优先级高于任何外部 CSS 规则——你写 path { fill: red; } 也白搭。
打开开发者工具检查 <path> 元素，如果 Attributes 里有 fill 或 stroke，就得手动删掉或改成 fill="none"。
立即学习“前端免费学习笔记（深入）”；
- 推荐导出时勾选「移除内联样式」（Figma/Illustrator 都支持）
- 若需保留原始色作 fallback，改用
fill="currentColor"，再靠父容器color控制 - 多色图标必须给每个
<path>单独加 class，例如<path class="logo-main">，不能依赖path:nth-child(1)—— 结构一变就断
用 currentColor 实现自动变色，但得写对位置
currentColor 不是魔法开关，它只继承**当前元素**计算出的 color 值，且必须显式写在图形子元素上：
✅ 正确：svg .icon-fill { fill: currentColor; } + <div class="icon" style="color: #3b82f6"><svg><path class="icon-fill"></path></svg></div>
❌ 错误：svg { fill: currentColor; }（<svg> 标签本身不支持 fill）
- IE11 不支持
<svg>根元素上设color影响子元素，必须把color设在父容器（如<span>或<button>）上 - hover 状态要改父容器的
color，而不是单独写path:hover { fill: ... } - 禁用态慎用
opacity，它会让整个 SVG 变淡；改用fill: #999; fill-opacity: 0.6;
CSS 变量控制颜色，但不能写在 HTML 属性里
fill="var(--color)" 在 SVG 标签里完全无效——浏览器不解析 HTML 属性值中的 CSS 变量，它被当作文本字面量忽略。
正确做法是把变量声明移到 CSS 规则中，并确保作用域可达：
✅ 正确：<div style="--icon-color: #ef4444"><svg><path class="icon-path"></path></svg></div> + .icon-path { fill: var(--icon-color, currentColor); }
- 变量必须定义在祖先元素上，
:root定义的变量在 Shadow DOM 或 scoped 样式中可能不可见 -
var(--icon-color, currentColor)的 fallback 依赖父容器有明确color值，否则currentColor退到默认黑 - 描边别漏掉：
.icon-path { stroke: var(--icon-color, currentColor); } - 变量名建议带组件前缀，如
--header-icon-color，避免全局污染
fill="#000" —— 这两点不清理，后面所有 CSS 都是空中楼阁。 
