currentcolor没反应是因为svg未进入样式上下文：必须内联、清除所有内联fill/stroke、css作用于path等子元素而非svg标签本身。
为什么fill: currentColor没反应
不是写法错，而是 SVG 没进入当前样式上下文。最常见的是：<img src="icon.svg"> 或 background-image: url(icon.svg) —— 这两种方式加载的 SVG 是独立文档，currentColor 根本传不进去。<svg fill="black"><path d=""></path></svg> 也一样，根元素的内联 fill 会直接覆盖 CSS 规则。
svg path { fill: currentColor } 必须满足的三个前提
缺一不可：
- SVG 必须内联（直接写在 HTML 中），不能是引用、
<img>或<use></use>外部<symbol></symbol>（除非该<symbol></symbol>已在当前 DOM） - 手动删掉所有内联
fill和stroke：包括<svg fill=""></svg>、<path fill="#333"></path>、甚至<g fill="none"></g> - CSS 必须作用于图形子元素，比如
svg path、svg circle，而不是只写svg { fill: currentColor }（<svg></svg>标签本身不可填充）
描边、多色、伪类怎么处理
currentColor 只管填充，不管描边；也不能区分多个区域颜色：
- 描边同步变色：用
svg path { stroke: currentColor }（Tailwind v3.3+ 支持stroke-current） - 双色图标（如红心+白高光）：拆成两个
<path></path>，分别加 class，用fill: var(--primary)和fill: var(--secondary) -
:hover等状态控制：必须把伪类加在父容器上，例如.btn:hover svg path { fill: #fff; }，而不是svg:hover path
框架里动态渲染 SVG 容易丢 fill="currentColor"
React/Vue 中常因安全过滤或属性转换导致失效：
- Vue 的
v-html或 React 的dangerouslySetInnerHTML可能被 DOMPurify 清掉fill属性 - JSX 写
<path fill="currentColor"></path>，React 会转成Fill="currentColor"（首字母大写），浏览器不识别 - 服务端返回的 SVG 字符串若含转义（如
fill="currentColor"），某些解析器会丢弃该属性 - 最稳做法：封装
SVGIcon组件，把fill="currentColor"写死在模板里，外部只传className控制文字色
真正卡住人的从来不是语法，而是 SVG 源码里残留的 fill="#000"、父容器没设 color、或者用了 <img> 却指望 CSS 能穿透——这些细节漏掉一个，currentColor 就彻底静音。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
