Safari中SVG图标fill: currentColor不生效是因继承链严格，需在<svg>根标签显式写fill="currentColor"、清除子元素内联fill属性、父容器设color: inherit。

SVG图标在Safari中fill: currentColor不生效的典型表现

文字颜色变了（比如 color: #007bff），但内联 SVG 图标仍是黑色；:hover 时图标完全不响应变色；开发者工具里看到 fill 计算值是 rgb(0, 0, 0) 或 none，而非预期颜色。这不是 Safari 的 bug，而是它对 CSS 继承链和内联属性清理更严格——尤其在 iOS 15–16 和 macOS Monterey–Sequoia 上，未显式声明 color 或残留 fill="black" 会直接回退到初始值。

必须检查的 Safari 特有兼容点

Safari 不像 Chrome 那样“宽容”，以下三点漏掉任一，currentColor 就失效：

• <svg> 根标签上没写 fill="currentColor"（仅靠 CSS svg { fill: currentColor; } 在 Safari 中继承不稳定，尤其嵌套在 flex 或 grid 容器里）
• <path> 等子元素仍带 fill="#000" 或 fill="black" —— Safari 对内联属性优先级执行更彻底，不会因 CSS 后加载就覆盖
• 父容器用了 color: inherit 但上层没定义 color（比如按钮外层是 <div> 且无样式），Safari 不会向上继续追溯，直接取 initial 黑色

修复方案：Safari 友好型内联 SVG 写法

不用依赖“理论上应该继承”，用显式、冗余但确定的方式确保生效：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• HTML 中直接写：<svg class="icon" fill="currentColor" viewBox="0 0 24 24"><path d="M12..." /></svg>（fill="currentColor" 必须在根 <svg> 上）
• CSS 中补全子元素规则：svg.icon path, svg.icon circle, svg.icon rect { fill: currentColor; stroke: currentColor; }
• 父容器哪怕只是装饰性元素，也加一句 color: inherit;（不是 inherit 值本身起作用，而是防止继承链断裂）
• 如果图标用于按钮，别只写 button:hover .icon { color: red; }，要写成：button:hover { color: #007bff; } + .icon { color: inherit; }

构建工具导出 SVG 时 Safari 的坑

SVGR、Figma 插件或 Webpack loader 默认保留原始 fill，Safari 会直接读取它。必须配置清理：

立即学习“前端免费学习笔记（深入）”；

• SVGR 中启用 svgoConfig：{ plugins: [{ name: 'removeAttrs', params: { attrs: 'fill|stroke' } }] }
• 手动正则替换（VS Code 可批量）：fill="[^"]*" → 空；stroke="[^"]*" → 空；注意别误删 viewBox 或 d
• 绝对不要用 content: url(icon.svg) 放伪元素——Safari 下 currentColor 在伪元素上下文里天然失效，没绕过办法

真正卡住 Safari 的，往往不是语法错误，而是“以为清干净了”——打开开发者工具 Elements 面板，逐个点开 <path>，确认 computed 样式里的 fill 是由 currentColor 计算而来，且没有被 inline style 覆盖。这点比 Chrome 更需要肉眼验证。