mask-image 不能改 SVG 图标颜色，因为它只控制显隐区域而非填充色；它仅通过 alpha 通道裁剪可见部分，不参与 color/fill 计算，故无法直接改变颜色。
为什么 mask-image 不能用来改 SVG 图标颜色
直接用 mask-image 控制 SVG 填充色是无效的——它不改变颜色，只控制“显隐区域”。mask-image 的作用是把一个图像（如 PNG、渐变或 SVG）当作遮罩层，裁剪出目标元素的可见部分，而不是重绘其 fill/stroke。你写的 mask-image: url("data:image/svg+xml, ...") 只会让图标变透明/半透，不会让黑图标变成红色。
移动端用 mask-image 的典型误用场景
常见错误做法包括：
- 把
mask-image当成filter: hue-rotate()用，试图“调色” - 对
<img src="icon.svg">元素加mask-image，期望修改内部 path 颜色——但外部 SVG 根本不解析 DOM，mask 只能作用于整张图的 alpha 通道 - 用
mask-image: linear-gradient(red, red)想“染色”，结果图标消失或只剩边缘
这些操作在 iOS Safari 和 Android Chrome 上行为一致：mask 成功应用了，但颜色没变，因为 mask 不触碰 color/fill 计算链。
真能间接“换色”的替代方案（仅限特定结构）
只有当 SVG 被转为纯黑+透明的单色蒙版（例如导出为 fill="black" stroke="none" 的内联 SVG），再配合 background-color + mask-image 才可能模拟填色效果：
.icon-mask {
width: 24px;
height: 24px;
background-color: #007bff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='black'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='black'/%3E%3C/svg%3E");
}
但该方案有硬伤：
- 必须手动导出无色 SVG（所有 fill/stroke 清空后设为 black），无法响应
currentColor或深色模式 - Android WebView 4.4–6.0 对
mask-image支持极差，常渲染为空白 - 无法处理描边（
stroke）、渐变填充或带 opacity 的路径
比 mask-image 更可靠的选择
遇到必须用外部 SVG 或无法改源码的场景，优先考虑：
- 用
filter: brightness(0) saturate(100%) invert(52%) sepia(84%) saturate(190%) hue-rotate(160deg)粗略映射黑→蓝（但失真严重，不保灰阶） - 改用
<svg><use href="sprite.svg#icon"></use></svg>并确保<symbol></symbol>内部已设fill="currentColor"，且<use></use>父容器有color - 构建时用 SVGR 或插件自动剥离 SVG 中所有
fill/stroke属性，生成 clean 版本
真正要让颜色可控，第一步永远是：确认 SVG 是内联的，第二步是删掉所有硬编码的 fill，第三步才是选 currentColor 还是 JS 动态注入 —— mask-image 不在这条链上，别让它干扰判断主因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
