svg需内联或use引用、变量定义在:root/外层容器、fill/stroke通过css类绑定（如.icon-head { fill: var(--color-head); }）并提供回退值，多色需拆分为独立path，背景图场景则用web component动态注入变量值。
SVG本身不直接继承CSS自定义属性，必须通过作用域控制、样式绑定和结构拆分三者配合，才能真正实现颜色、尺寸等属性的动态响应。
作用域是前提：变量必须可被SVG子元素访问
CSS变量（如--icon-color）若只写在<svg></svg>标签的style属性里，内部<path></path>无法读取——它只作用于该<svg></svg>自身，不向下传递。正确做法是：
- 将变量定义在
:root或外层容器上，例如<div class="icon-wrapper" style="--icon-color: #10b981"><svg>...</svg></div> - 避免用
<img src="icon.svg">引入SVG：此时SVG运行在独立文档上下文，完全隔离CSS变量 - 确保SVG是内联写法（即HTML中直接写
<svg><path></path></svg>），或通过<use></use>引用<symbol></symbol>
样式绑定是关键：fill/stroke必须走CSS规则，不能写在SVG属性里
<path fill="var(--icon-color)"></path>这种写法无效——SVG解析器把var()当普通字符串处理，不会计算。真正生效的方式只有一种：
- 用CSS类选择器绑定，例如
.icon-head { fill: var(--color-head, currentColor); } - 务必提供回退值（如
currentColor或#000），否则变量未定义时可能渲染为透明或意外色 - 对
<use></use>克隆的内容，需给<use></use>元素加class，再写.icon-use path { fill: var(--x); }，不能依赖父容器直接透传
多色控制靠结构：一个只能一种fill，拆分是硬要求
哪怕路径数据里包含多个闭合区域（如d="M10 10 Z M30 10 Z"），浏览器仍视其为单个图形，fill无法局部生效。要实现头部红色、身体蓝色这类效果：
- 导出SVG时，在Figma/Illustrator中启用「分离形状」或「展开复合路径」
- 手写SVG时，每个待独立着色区域用单独
<path></path>，并赋予不同class，如<path class="head" d="..."></path>、<path class="body" d="..."></path> - 对应CSS中分别定义：
.head { fill: var(--color-head, #ef4444); } .body { fill: var(--color-body, #3b82f6); }
背景图场景：外部SVG也能响应变量，但需额外处理
当SVG作为background-image使用时，原生不支持CSS变量。可行方案是：
- 用Web Component动态加载SVG源码，替换其中颜色值为当前计算出的变量值，再转为Data URI设为背景
- 关键步骤包括：fetch SVG文本 → 安全转义（
"→'，#→%23）→ 压缩空白 → 插入<style></style>块或内联fill→ 编码为data:image/svg+xml - 这样既保持外部文件维护便利性，又让背景图能随
:root或局部作用域变量实时更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
