feColorMatrix各元素含义解析及HEX转矩阵值技术咨询

我来帮你理清楚feColorMatrix里type="matrix"的values参数，以及怎么把你的黑色SVG转成#26bf8c这个颜色。

一、先搞懂values每个值的含义 #

type="matrix"对应的values是一个20个数字的数组，对应一个4×5的颜色变换矩阵，每个输出通道（R/G/B/A）的计算逻辑是这样的：

输出R = 输入R×a0 + 输入G×a1 + 输入B×a2 + 输入A×a3 + a4
输出G = 输入R×a5 + 输入G×a6 + 输入B×a7 + 输入A×a8 + a9
输出B = 输入R×a10 + 输入G×a11 + 输入B×a12 + 输入A×a13 + a14
输出A = 输入R×a15 + 输入G×a16 + 输入B×a17 + 输入A×a18 + a19

拆解开每个位置的作用：

• 前4个值（a0-a3）：控制输入红色通道对输出R/G/B/A的影响程度
• 接下来4个（a5-a8）：输入绿色通道对输出各通道的影响
• 再4个（a10-a13）：输入蓝色通道对输出各通道的影响
• 再4个（a15-a18）：输入Alpha（透明度）通道对输出各通道的影响
• 最后4个（a4、a9、a14、a19）：每个输出通道的偏移量（相当于给通道直接加一个固定值）

二、把#26bf8c转成对应的矩阵值 #

你的需求是把黑色SVG（输入的R/G/B都是0，Alpha是1）转成目标颜色，那我们可以简化计算：

1. 先把HEX转成0-1范围的RGB值：
   #26bf8c的RGB分量是：
   • R: 0x26 = 38 → 38/255 ≈ 0.149
   • G: 0xbf = 191 → 191/255 ≈ 0.749
   • B: 0x8c = 140 → 140/255 ≈ 0.541
2. 构建矩阵：
   因为输入是黑色（R/G/B=0），所以前面的颜色通道系数可以全设为0，只需要给每个输出颜色通道设置对应的偏移量，同时保持Alpha不变：
   • 输出R：只需要偏移量0.149 → 对应values里的第5个值（a4）
   • 输出G：偏移量0.749 → 对应第10个值（a9）
   • 输出B：偏移量0.541 → 对应第15个值（a14）
   • 输出Alpha：保持原样，所以输入Alpha的系数设为1（a18），偏移量0（a19）

最终的values参数就是：
0 0 0 0 0.149 0 0 0 0 0.749 0 0 0 0 0.541 0 0 0 1 0

三、修改后的SVG代码示例 #

<svg width='20px' height='10px' preserveAspectRatio='none meet'>
  <image filter='url(#colorMatrixFilter1)' width='20px' height='10px' xlink:href='../img.svg' />
  <defs>
    <filter id='colorMatrixFilter1'>
      <feColorMatrix type='matrix' values='0 0 0 0 0.149 0 0 0 0 0.749 0 0 0 0 0.541 0 0 0 1 0'/>
    </filter>
  </defs>
</svg>

补充：你之前的问题出在哪？ #

你之前用的矩阵values='1 0 0 0 0 1 0 0 1 0 1 0 0 0 0 0 1 0 1 0'逻辑不对，它会让输出R等于输入R+输入B，输出G等于输入R+输入A，这完全不是你要的黑色转指定色的效果，所以才达不到预期。

内容的提问来源于stack exchange，提问作者CodeGust