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

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

指定“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>

要使用实时Color Matrix并查看它如何影响事物，请查看： https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

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

1 个答案: