svg的fill只能设一个颜色，因为fill作用于整个元素而非子区域；需将多色区域拆分为多个独立，再通过css变量分别控制fill。
SVG <path></path> 填充多色区域时，为什么 fill 只能设一个颜色？
因为 SVG 的 fill 属性作用于整个路径（<path></path>），不是按子区域划分的。哪怕路径数据里包含多个闭合轮廓（如 M 10 10 L 20 10 L 20 20 Z M 30 10 L 40 10 L 40 20 Z），浏览器仍把它当做一个整体图形，fill 无法单独指定第二段的色值。
真正可行的思路是：把每个需独立上色的区域拆成独立的 <path></path> 元素，再分别控制它们的 fill —— 这样才能配合 CSS 变量动态变色。
- 用矢量工具（如 Figma、Illustrator）导出时勾选「将复合路径展开」或「分离重叠形状」
- 手写 SVG 时，避免用单个
<path d="M...Z M...Z"></path>合并多个区域，改用多个<path d="M...Z"></path> - 导出后检查 DOM：每个待变色区域应有独立的
<path></path>标签，并建议加class或id便于后续选择
如何用 CSS 变量给不同 <path></path> 分别绑定可变颜色？
直接在 SVG 内联样式中写 fill: var(--color-head) 是无效的——SVG 元素默认不继承外部 CSS 变量，除非显式声明 fill 为 CSS 属性且该元素处于样式作用域内。
稳妥做法是：把 SVG 内联进 HTML（而非 <img src="...svg">），然后用类名 + CSS 变量控制：
<svg viewbox="0 0 100 100"><path class="head" d="M20,20 Q50,10 80,20 L75,40 Q50,35 25,40 Z"></path><path class="body" d="M30,40 L30,70 Q50,80 70,70 L70,40 Z"></path></svg><style>
.head { fill: var(--color-head, #ff6b6b); }
.body { fill: var(--color-body, #4ecdc4); }
</style>
- 变量必须定义在能被这些类匹配到的作用域中（如
<style></style>内、或外层容器的style="--color-head: #556"） - 不要依赖
currentColor模拟多色——它只能传一个值，无法区分 head/body - 若需 JS 动态改色，操作的是元素的
style.setProperty('--color-head', '#...')，不是直接改fill
为什么用 fill: paint() 或 <pattern></pattern> 不适合动态多色填充？
paint() 是 CSS Houdini API，目前仅 Chromium 115+ 实验性支持，且需注册 worklet，无法用于生产环境中的兼容性需求；<pattern></pattern> 本质是纹理贴图，每次换色都要重新定义 <pattern></pattern> 并更新 fill 引用，JS 控制成本高、无变量抽象能力。
- 想实现「点击切换头部红色/蓝色/绿色」，用
<pattern></pattern>要预定义 3 个<pattern></pattern>+ 切换 3 种fill="url(#red)"，远不如style.setProperty('--color-head', 'blue')直观 - 所有基于 SVG 元素自身属性（如
fill、stroke）的方案，都比引入<defs></defs>+<pattern></pattern>+ ID 引用更轻量、更易维护 - 若图形含渐变色，才考虑
<lineargradient></lineargradient>配合变量（通过stop-color绑定变量），但那是另一类需求
复杂图形缩放/响应式下，CSS 变量控制的填充色会失真吗？
不会。颜色值本身与尺寸无关，--color-head 是纯色值，无论 SVG 是 width="200" 还是用 transform: scale(2)，填充色都不受影响。
但要注意两个隐性干扰点：
- 如果图形用了
stroke且未设vector-effect="non-scaling-stroke"，缩放时描边会变粗，视觉上可能“吃掉”部分填充区域，让人误以为颜色被压缩 - 某些设计稿导出的 path 含极小坐标（如
d="M0.001 0.002 L0.003 0.002"），在低分辨率设备上可能因抗锯齿失效导致边缘色块异常，这不是变量问题，而是路径精度问题，需在导出前简化路径或扩大画布单位 - 如需适配暗色模式，可在
@media (prefers-color-scheme: dark)中覆盖变量值，例如:root { --color-head: #ff9a9e; } @media (prefers-color-scheme: dark) { :root { --color-head: #ff6b6b; } }
真正难的从来不是怎么填色，而是怎么把设计师给的「一团路径」拆成语义清晰、可独立受控的几个 <path></path> —— 这一步没做对，后面所有变量、动画、交互都建立在流沙之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
