В чем смысл каждого элемента 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

Чтобы перекрасить элемент в определенный цвет, вы должны сделать это.

• Указать "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>

Чтобы поиграть с живой Матрицей цветов и посмотреть, какэто влияет на вещи проверить: https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices