IE11中内联SVG的fill:currentColor不生效，需在<svg>标签直接写fill="currentColor"并清除所有子元素的fill/stroke属性，同时确保父容器显式声明color。
内联 SVG 的 fill: currentColor 在 IE11 中不生效怎么办
IE11 不支持 currentColor 在 svg 根元素上被子元素继承（比如 path），即使写了 svg { fill: currentColor; }，path 依然显示默认黑色。
最稳妥的写法是直接在 <svg> 标签里硬编码 fill="currentColor"：
<svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/> </svg>
- 这个属性写法兼容 IE9+，且优先级高于外部 CSS，不会被覆盖
- 仍需确保所有
<path>、<circle>等子元素没带fill或stroke属性，否则会锁死颜色 - 如果用构建工具（如 SVGR），配
svgoConfig清除原始fill：{ removeAttrs: { attrs: 'fill|stroke' } }
SVG 作为 background-image 时颜色无法控制，怎么绕过
background-image: url(icon.svg) 引入的 SVG 是独立资源，fill: currentColor 完全无效——它压根不在当前 DOM 的样式作用域里，浏览器连解析都不会解析里面的 CSS。
可行方案只有两个，没有“优雅兼容”：
立即学习“前端免费学习笔记（深入）”；
- 改用内联 SVG：把 SVG 源码贴进 HTML，删掉所有内联
fill，再用svg, path { fill: currentColor; } - 预生成多色版本：用构建脚本导出
icon-primary.svg、icon-danger.svg等，按需切换 class 或 src
别碰 filter: hue-rotate() 来“变色”，它会扭曲灰阶、破坏透明度，对品牌色或图标细节极不友好。
Chrome/Firefox 正常但 Safari 显示黑图标，检查什么
Safari（尤其是 iOS 15–16）对内联 SVG 的 currentColor 继承有 bug：如果父容器只设了 color: inherit，而上层没显式定义 color，currentColor 就回退成黑色，不是继承链断裂，而是计算逻辑不同。
实操要点：
- 父容器必须显式声明
color，哪怕只是color: #000;或color: var(--text-color, #333); - 避免只靠
inherit传递，Safari 不认这种隐式链 - 用开发者工具检查 computed 样式里的
fill值，确认它是rgb(0, 0, 0)还是rgba(0, 0, 0, 0)—— 后者说明继承失败，前者说明父级 color 是黑色
用 <use> 引用 sprite 时颜色不响应 hover
<use href="#home"> 默认不透传 currentColor，就算父容器 :hover 改了 color，<use> 渲染出的图形也不会变。
必须加一层包裹并手动透传：
<svg class="icon"> <use href="#home"/> </svg>
CSS 写成：
.icon { fill: currentColor; }
/* 注意：不能写 .icon svg { fill: currentColor; }，选择器太深，.icon 已经是 svg 元素 */-
<symbol>定义里所有路径必须是fill="currentColor"或干脆没fill属性 - 如果用了
fill="none"，hover 时只会变描边，填充始终透明 - React/Vue 封装组件时，别只传
colorprops 而不把它绑定到根<svg>的fill属性上
真正卡住的点从来不是 CSS 写法本身，而是 SVG 是否内联、内联后是否清干净、父级 color 是否显式可取——三者缺一，currentColor 就只是个摆设。
