svg图标颜色不随css变色，90%因未内联或残留硬编码fill/stroke属性；须内联svg、清除所有内联颜色值、确保父容器有可计算color，并显式声明xmlns与fill="currentcolor"。
SVG图标颜色不随CSS变色？先确认是否内联且清空硬编码fill
90%的“颜色改不了”问题，根源是SVG没内联，或内联后仍保留fill="#333"、stroke="red"这类内联属性。浏览器会直接用这些值，完全忽略fill: currentColor或svg { fill: red; }。必须手动删掉：<svg></svg>根标签上的fill、stroke；所有<path></path>、<circle></circle>、<g></g>子元素上的fill/stroke；以及<defs><style></style></defs>块里的类规则。
常见错误包括：<svg fill="none"></svg>——这个fill="none"本身就会阻断继承链；<img src="icon.svg">——外部SVG完全隔离样式上下文，currentColor根本不可见。
currentColor在Firefox/Safari中失效？检查父容器color计算值
currentColor不是自动继承，它取的是**当前元素自身最终计算出的color值**。如果图标还是黑的，说明它（或其直接父元素）的computed color仍是rgb(0, 0, 0)。用DevTools的Computed面板确认目标<svg></svg>或其**直接父元素**是否显式设置了color（比如button.icon { color: #007bff; }），而不是只在body或祖父级设了color。
Firefox对currentColor继承链支持较弱，尤其当color来自CSS变量或inherit时容易中断；Safari则可能因缺失xmlns="http://www.w3.org/2000/svg"触发严格XML解析，丢弃未声明命名空间的元素。务必在<svg></svg>上显式写：xmlns="http://www.w3.org/2000/svg"和fill="currentColor"（比纯CSS更稳，兼容IE11）。
- 避免
* { color: inherit; }——通配符劫持继承链，currentColor取不到明确值 - 深色模式下不变色？不是
fill-current失效，而是你用的text-gray-700是固定色，应改用text-gray-900 dark:text-gray-100 - 描边图标（如outline风格）需额外加
stroke: currentColor，fill-current对stroke无效
hover变色或主题切换没反应？驱动逻辑不在fill而在color
fill: currentColor只是取值机制，不会自动响应状态变化。要实现:hover变色，必须由父级color驱动：.icon { color: #666; } + .icon:hover { color: #007bff; }，再配合svg { fill: currentColor; }。只写.icon:hover { fill: red; }无效，因为fill不继承，且hover时不会重新计算currentColor。
多色图标不能全靠currentColor：给不同<path></path>加class（如<path class="bg"></path>、<path class="accent"></path>），再分别定义.icon:hover .bg { fill: #f00; }。
用<use href="#icon"></use>时更需注意：<use></use>默认不继承currentColor，必须确保<symbol></symbol>内部路径已清空硬编码颜色，并在外层<svg></svg>加class（如<svg class="icon"><use href="#home"></use></svg>），再写.icon { fill: currentColor; }——选择器太深（如.icon svg { fill: currentColor; }）会导致匹配失败。
Chrome/Firefox/Safari显示同一#FF6B6B颜色不同？别怪浏览器，怪没声明色彩空间
差异不是渲染bug，而是色彩管理策略不同：Chrome v110+启用严格sRGB管理，Firefox沿用传统sRGB基准，Safari（尤其macOS/iOS）默认映射到Display P3色域。十六进制#FF6B6B本身不携带色彩空间信息，各浏览器按默认策略解释，结果自然不同。
解决方案不是调校显示器，而是显式声明：color: color(srgb 1 0.4196 0.4196);（数值需归一化为0–1）。该语法Chrome 111+、Safari 16.4+、Firefox 117+支持，旧版本会忽略，因此必须配fallback：color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);。
禁用hsl()、lab()、color(display-p3)等非sRGB函数，除非你明确在做HDR适配；rgba()的alpha通道叠加后，不同浏览器混合算法有微小差异，务必在真实背景上预览，别只看纯白底。
实际项目中最容易被忽略的点，是把SVG源码清理干净这件事——它无法靠构建工具全自动完成，必须人工逐行检查原始字符串，确认没有残留的fill、stroke、style属性，否则所有CSS方案都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
