feColorMatrix 是 SVG 中最灵活的像素级色彩映射工具，通过 type 属性选择 saturate、hueRotate、luminanceToAlpha 或 matrix 模式，配合 values 矩阵精准控制 RGBA 输出，适用于双色调、主题色适配、负片效果等场景。
feColorMatrix 是 SVG 滤镜中控制像素级色彩映射最灵活的工具，它不依赖视觉叠加，而是直接重算每个像素的 RGBA 值。掌握它，就能把灰图变双色调、黑图标转主题色、甚至模拟胶片偏色——关键不在“怎么写”，而在“怎么想颜色”。
理解 type 属性：选对模式，少调 90% 参数
type 决定了你是在做「全局调节」还是「精确映射」：
- saturate：调整整体饱和度（0=灰度，1=原样，>1=更鲜艳），适合快速增强/弱化色彩氛围
-
hueRotate：绕色相环旋转（单位 deg），但仅对已有色相有效——纯黑/白图标需先用
grayscale(0%) sepia(100%)“唤醒”色相 - luminanceToAlpha：把亮度转为透明度（白→全透，黑→不透），常用于制作镂空遮罩或胶片感负片效果
- matrix：完全自定义映射，4×5 矩阵对应 RGBA 输出 = 矩阵 × [R,G,B,A,1]，是实现精准着色、单色转多色、通道替换的核心方式
matrix 值怎么填：记住最后一列是“偏移”
values 是 20 个数字（按行排列的 4×5 矩阵），每行控制一个输出通道：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 第 1 行 → 新 R 值：R×a + G×b + B×c + A×d + e
- 第 2 行 → 新 G 值：R×f + G×g + B×h + A×i + j
- 第 3 行 → 新 B 值：R×k + G×l + B×m + A×n + o
- 第 4 行 → 新 A 值：R×p + G×q + B×r + A×s + t
例如将纯黑图标（R=G=B=0）映射为 #4285f4（RGB: 66,133,244）：
values="0 0 0 0 0.26 0 0 0 0 0.52 0 0 0 0 0.98 0 0 0 1 0"
——前三行最后一列分别是 66/255≈0.26、133/255≈0.52、244/255≈0.98，第四行保持 0 0 0 1 0（不改透明度）。
实用技巧：让滤镜真正可用
- 滤镜定义必须放在 HTML 的
<svg><defs><filter>...</filter></defs></svg>中，不能写在 CSS 文件里 - 调用时用
filter: url(#myFilter)，确保 ID 一致且页面内唯一 - 想让效果更自然？在
<filter>标签上加color-interpolation-filters="linearRGB"，尤其处理渐变或阴影时颜色过渡更平滑 - 性能注意：每个
filter: url()都会触发 GPU 合成，列表页大量图标慎用；优先考虑fill="currentColor"这类 CSS 原生方案
常见需求速查表
-
灰图变蓝调：用
type="matrix"把灰阶值（R=G=B=L）映射到蓝+白双色，如浅灰→#e0f0ff，深灰→#0d47a1 -
图标响应主题色：SVG 内联 +
fill="currentColor"+ 父元素设color，比 filter 更轻量可靠 -
制造负片感：组合
feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" -
提取亮度通道做遮罩：配合
luminanceToAlpha+feComposite operator="in"实现基于明暗的局部覆盖
