使用<img>引入外部SVG时currentColor失效，因其独立文档上下文无法继承父级颜色；解决方法为内联SVG或用mask-image/background-image配合单色SVG。
直接用 <img> 引入外部 SVG 图标，currentColor 会失效
这是最常踩的坑：把 SVG 当成普通图片用 <img src="icon.svg">，然后指望父级 color: red 能让图标变红——根本不会。因为 <img> 是独立文档上下文，currentColor 无法继承。SVG 内部写死的 fill="#000" 就永远是黑的。
解决办法只有两个方向：
- 改用内联 SVG：
<svg><path fill="currentColor" ...></svg>，样式可继承、可响应、可动画 - 若必须外链，就别依赖
currentColor，改用mask-image或background-image配合单色 SVG（纯黑/透明）做遮罩
mask-image 引入外部 SVG 的硬性要求
用 mask-image: url("icon.svg") 能动态变色，但有三个不可绕过的前提：
- SVG 文件必须是单色：只含
#000（显示区域）和transparent（隐藏区域），不能带灰度或其它颜色 - 必须确保服务器允许跨域：如果 SVG 在 CDN 或不同域名下，需配
CORS头，否则浏览器静默失败，控制台可能不报错 - Safari 必须加前缀：
-webkit-mask-image: url("icon.svg")，且不能用mask复合属性，得拆开写mask-image+mask-size等
常见错误是把带 <style> 或多色渐变的 UI 图标 SVG 直接丢进 mask-image，结果整个图标消失或显示异常。
立即学习“前端免费学习笔记（深入）”；
background-image + 外部 SVG 的编码陷阱
想用 background-image: url("icon.svg") 并保持可变色？不行——background-image 不继承父级 color，图标颜色就锁死了。但如果你只是要一个固定色图标，又不想内联，可以走这条路：
- 确保 SVG 中所有
fill、stroke都设为具体值（如fill="currentColor"没用，得写fill="#3b82f6"） - 如果 SVG 路径里用了
#符号（比如url(#gradient)），必须对整个 URL 做encodeURIComponent()，否则解析中断 - 更稳妥的做法是转 base64：
background-image: url("data:image/svg+xml;base64,PHN2Zy...")，避免路径、编码、CORS 全部问题
注意：Tailwind 默认不支持 bg-[url(...)] 动态写 data URL，引号和括号嵌套极易出错，建议在 tailwind.config.js 的 theme.extend.backgroundImage 里预定义。
为什么 Safari 上 mask-image 总是不生效
不是代码写错了，大概率是 Safari 的限制太死：
- 它不接受
mask-image: url("data:image/svg+xml,...")这种 data URL 写法，哪怕其他浏览器能跑 - 它要求
-webkit-mask-image必须显式声明，且不能和mask复合属性混用 - 如果 SVG 里用了
<defs>或<symbol>，Safari 可能完全忽略——得扁平化成单个<path>或<g>
最省事的兼容方案：对 Safari 单独 fallback 到内联 SVG，或者用 @supports (-webkit-mask-image: none) 区分处理。别指望一套 CSS 通吃。
