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></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" 实现基于明暗的局部覆盖