H5多色SVG单色主题换肤应采用统一着色机制而非逐色替换：优先用CSS filter（grayscale+hue-rotate+saturate）实现轻量兼容方案；次选feColorMatrix精确控制；或用CSS变量+内联SVG精细区域填色，须避免外链SVG和硬编码颜色。
在 H5 中实现多色 SVG 图形的单色主题一键换肤，关键不是“给每个颜色单独替换”，而是用统一、可切换的着色机制覆盖原有色彩。真正高效的做法是：把多色 SVG 当作“灰度底图”，再通过滤镜或 CSS 层叠叠加主题色——这样一套逻辑就能适配任意主题色，无需维护多份 SVG 文件。
用 CSS filter 实现单色主题映射
对 SVG 元素（尤其是内联 SVG）应用 filter 是最轻量、最兼容的方案。核心思路是先将原图转为灰度，再用色调映射（hue-rotate + saturate）注入主题色：
- 确保 SVG 内部不写死
fill/stroke，或统一设为currentColor或中性灰（如#888） - 在 CSS 中定义主题类，例如：
.theme-red svg { filter: grayscale(100%) brightness(0.8) sepia(0.2) hue-rotate(15deg) saturate(3); } - 切换时只需切换父容器 class：
document.body.className = 'theme-blue'; - 支持平滑过渡：
svg { transition: filter 0.3s ease; }
用 feColorMatrix 动态注入主题色（适合高级控制）
若需精确控制色相饱和度、适配深浅模式或响应系统偏好，推荐在页面底部隐藏一个 <svg>，内建预设滤镜：
- 定义滤镜：
<filter id="theme-red"><feColorMatrix type="matrix" values="0.3 0.6 0.1 0 0 0.3 0.6 0.1 0 0 0.3 0.6 0.1 0 0 0 0 0 1 0"/></filter>
该矩阵将所有颜色映射为偏红的单色基调 - 绑定到 SVG：
<svg style="filter: url(#theme-red);">...</svg> - 一键切换只需 JS 修改：
svgEl.style.filter = 'url(#theme-green)'; - 配合
window.matchMedia可自动响应深色模式，无需重绘
内联 SVG + CSS 变量驱动填色（语义清晰、易调试）
适用于结构固定、需精细控制区域颜色的场景（如地图图标、状态导图）：
- 将 SVG 写入 HTML，各区域用 class 标识：
<path class="area-primary" d="..." /><path class="area-secondary" d="..." /> - CSS 中用变量控制：
.area-primary { fill: var(--theme-primary, #3498db); } .area-secondary { fill: var(--theme-secondary, #95a5a6); } - 一键换肤即批量设置根变量：
document.documentElement.style.cssText = '--theme-primary:#e74c3c; --theme-secondary:#c0392b;'; - 注意：必须确保 SVG 是内联的（非
<img>），否则无法被 CSS 选中
避免踩坑的关键点
多色 SVG 换肤容易失败，往往卡在细节：
- 别用
<img src="icon.svg">—— 外链 SVG 无法被 CSS 或 JS 操控内部样式 - 别在 SVG 内写
fill="#ff0000"硬编码 —— 改成fill="currentColor"或留空，由外部控制 - 微信小程序等环境不支持内联 SVG 的 CSS 填色？改用 base64 编码 + 字符串替换（读文件 → 正则替换 fill → 转 base64 → 赋值给 image src）
- 移动端拖拽换肤可作为交互增强，但底层仍应基于上述任一渲染方案，而非依赖拖放事件本身完成着色
