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

Question

每个 feColorMatrix 值的含义是什么？

我有一个黑色的 svg 形状，它必须用 #26bf8c 颜色遮盖。我正在尝试找到该矩阵的含义以将我的十六进制转换为它？

<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

要将元素重新着色为特定颜色，您必须执行此操作。

• 指定“color-interpolation-filters=”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>

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

矩阵的单元格 1,1 是红色 -> 红色乘数

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

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

要查看每个单元格的作用 - 您可以在此处使用实时颜色矩阵: https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices