feColorMatrix的每个元素的含义是什么？

Question

每个feColorMatrix值的含义是什么？

我有一个黑色的svg形状，它必须用#26bf8c颜色蒙住。我试图找到矩阵的意义，把我的HEX转换成它？

<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='1 0 0 0 0
                            1 0 0 1 0
                            1 0 0 0 0
                            0 1 0 1 0
                    '/>
        </filter>
    </defs>
</svg>

我想我可以将rgb值写成二进制表示，但矩阵的工作方式似乎不同。

Answer 1

要将元素重新着色到特定的颜色，您必须这样做。

• 指定“颜色插值-过滤器=”sRGB“。
• 将您的十六进制值转换为单位比例尺(0 - 1)。
• 将R/G/B值放在第五列，矩阵的前三行。

你的具体矩阵是：

        <filter id='colorMatrixFilter1' color-interpolation-filters="sRGB">
        <feColorMatrix type='matrix'
                values='0 0 0 0 0.149
                        0 0 0 0 0.749
                        0 0 0 0 0.548
                        0 0 0 1 0'/>
    </filter>

前四列中的所有值都是乘数。他们获取每个像素的每个颜色通道的值，乘以矩阵单元格的值，然后将它添加到另一个颜色通道。第五列是偏移量--它为每个彩色通道添加一个固定值。

矩阵的单元格1是一个红色->红色乘法器。

矩阵的单元格2,1是绿色->红色乘数(列、行表示法)。

单元格1,2的矩阵是一个红色的->绿色乘子(在列，行表示法)等。

要查看每个单元格的功能-您可以在这里使用活动颜色矩阵：https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices