feColorMatrix 是 SVG 中对像素颜色做线性变换的滤镜原语，将 r、g、b、a 视为四维向量与 5×5 矩阵（含齐次坐标）相乘实现灰度、反色等效果，需严格填写25个浮点数且按列排布。
feColorMatrix 是什么，它怎么改变颜色
feColorMatrix 是 SVG 中用于对像素颜色做线性变换的滤镜原语，本质是把每个像素的 r, g, b, a 当作四维向量，左乘一个 5×5 矩阵（第5维是恒为1的齐次坐标），输出新颜色。它不依赖 JavaScript，纯声明式，适合静态着色、灰度化、反色、色偏等场景。
关键点：矩阵按列排布，顺序是 [r, g, b, a, 1]；SVG 规范要求矩阵值以空格或换行分隔，且必须填满25个数字。
常见错误现象：feColorMatrix 没生效，往往因为：父 <filter> 没被引用（缺少 filter 属性）、坐标系超出 filterUnits 范围、或矩阵最后一列（偏移项）用了非归一化值（如写 255 而不是 1）。
实现灰度、反色、饱和度调整的常用矩阵写法
直接抄可用的矩阵比手算安全。注意所有值都是浮点数，范围通常在 [0, 1] 或 [-1, 1]，超出会截断或溢出（浏览器行为不一致）。
立即学习“前端免费学习笔记（深入）”；
- 灰度（Luminance）：
matrix(0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0) - 反色：
matrix(-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0) - 去饱和（转灰度后叠加原色，系数=0.5）：
matrix(0.6063 0.3537 0.04 0 0 0.3537 0.5963 0.05 0 0 0.04 0.05 0.91 0 0 0 0 0 1 0)
参数差异：同一效果在不同渲染引擎中可能有细微差别（比如 Chrome 对 alpha 通道的处理更严格），建议在目标浏览器中实测。性能影响极小，但避免在大量动态元素上高频切换 filter 引用。
为什么 matrix 值要写成一行，且不能省略末尾的 0
SVG 解析器对 feColorMatrix 的 values 属性要求严格：必须是25个数值，空格分隔，不可换行（除非用
实体，但不推荐）。写成多行或漏掉某个值会导致整个滤镜失效，且控制台通常不报错。
容易踩的坑：
- 复制别人代码时末尾多了一个空格，导致解析失败
- 以为第5列（偏移列）只影响 alpha，其实它对 r/g/b 同样有效，例如
... 0 0 0 0 0.5会让所有像素变亮 50% - 用整数写矩阵（如
255）代替归一化值（1），结果全黑或全白
如何调试 feColorMatrix 效果不明显的问题
最有效的办法是用已知输入验证输出：画一个纯红矩形 <rect fill="red">，应用滤镜后看是否变成预期色（如灰度应为 rgb(255*0.2126, ...) ≈ #363636）。
实操建议：
- 先禁用其他滤镜或 CSS
opacity，排除干扰 - 给
<filter>加x="-50%" y="-50%" width="200%" height="200%"，防止裁剪 - 用 DevTools 检查元素是否真绑定了
filter属性，且 URL 引用正确（如url(#myFilter)） - 临时把矩阵改成
matrix(1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0)（单位矩阵），确认滤镜基础通路正常
复杂点在于矩阵没有直观的“预设模式”，每个数值都耦合影响多个通道；最容易被忽略的是齐次坐标的隐含加法——第5列的值会直接加到对应通道，不是乘法。
