CSS变量如何用于SVG图标换色？-css教程-PHP中文网

fill="var(--color)"在svg中无效，因浏览器不解析html属性中的css变量；须改用css规则绑定var()，清除所有内联fill/stroke，确保svg内联、父容器设color，并用currentcolor作fallback。

css变量如何用于svg图标换色？

fill="var(--color)" 在 SVG 标签里完全不生效——浏览器压根不解析 HTML 属性值中的 CSS 变量，它只当普通字符串处理。

为什么内联写 `fill="var(--color)"` 没反应

这不是变量没定义、也不是 CSS 写错，而是语法层面被忽略。SVG 元素的 fill、stroke 等属性值属于 HTML 属性（attribute），而 var() 是 CSS 自定义属性（property）机制，二者不在同一解析层。浏览器遇到 fill="var(--color)" 时，不会去查找变量，直接按字面量渲染，结果等价于 fill="var(--color)" —— 非法值，退为默认色（通常是黑或透明）。

常见错误现象：

图标颜色始终不变，开发者工具里看到 fill 属性被 strike-through，但实际计算样式里没值
改了 :root { --color: red; }，图标还是黑的
用 <img src="icon.svg"> 引入，再怎么写 CSS 都无效

必须用 CSS 规则绑定 `var()`，且清除内联颜色

真正起作用的方式是：把颜色控制逻辑从 HTML 属性移到 CSS 选择器中，并确保 SVG 路径没有更高优先级的内联 fill 或 stroke 干扰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

删掉所有 <path></path>、<circle></circle>、<svg></svg> 上的 fill、stroke 和 style 属性（保留 viewBox、d 等结构属性）
SVG 必须是内联写法：<svg><path></path></svg>，不是 <img>、<use></use>（除非 <symbol></symbol> 在当前 DOM）、也不是 background-image
用明确选择器绑定变量，例如：.icon path { fill: var(--icon-color, currentColor); }
变量必须定义在祖先元素上，比如 <div class="header" style="--icon-color: #1e40af"><svg>...</svg></div>；仅写 :root 定义，在 Shadow DOM 或 scoped 样式里不自动继承

`currentColor` 是最稳 fallback，但父容器 `color` 必须有值

var(--icon-color, currentColor) 看似保险，但 currentColor 不是“默认黑色”，它是严格继承父元素的 color 计算值。如果父容器没设 color（哪怕只是 color: inherit;），它就会退到浏览器初始值（通常为 #000000），导致图标“突然变黑”或“消失”。

给图标容器加一层明确的 color，例如：.icon { color: #6b7280; }，hover 时只需改这层：.icon:hover { color: #ef4444; }
暗色模式兼容靠这个链路天然生效：@media (prefers-color-scheme: dark) { :root { color: #e2e8f0; } }
如果图标含描边，别漏掉：.icon path { stroke: var(--icon-color, currentColor); }
多色图标必须拆成多个 <path></path> 并分别加 class，单个 <path></path> 无法局部填色

构建工具和导出设置容易悄悄破坏这套逻辑

很多团队用 Figma / Illustrator 导出 SVG，或通过 SVGR、vite-plugin-svg 等工具自动引入，这些流程默认会保留原始 fill="#000" 或把 currentColor 替换为硬编码值，导致变量失效。

Figma / AI 导出时勾选「移除内联样式」或「清除颜色属性」
SVGR 配置加 svgoConfig: { plugins: [{ name: 'removeAttrs', params: { attrs: ['fill', 'stroke'] } }] }
Vite 中若用 import Icon from './icon.svg?inline'，确认 loader 没启用 replaceAttrValues（默认 true，会把 currentColor 转成具体色值）
React/Vue 组件传色值时，用 style={{ '--icon-color': color }}，并加 fallback：color: #666; color: var(--icon-color);

最容易被忽略的是：SVG 不是图片，它是 DOM 节点。你得打开开发者工具，逐层检查 fill 是否被内联属性挡住、computed 样式里 fill 值是否来自 var()、祖先节点的 color 是否真的有计算值——跳过这步，所有变量方案都会在某个上线前夜失效。