#html #css #html5 #svg #filter
Изображение svg в формате base64
Необходимо черной фигуре svg, задать цвет #26bf8c. Но как его записать в значениях
feColorMatriх?
Что значит каждое значение(элемент) этой матрицы?
Ответы
Ответ 1
Ниже на рисунке показано, за какими строчками и столбцами закреплены определенные каналы цветов и прозрачности цвета: В крайнем, правом столбце, каждая строка,- это финальный результат выполненных матричных вычислений по определенным каналам. Первая строка отвечает за красный цвет (R). Если в этой строчке будет "1", а в двух последующих строках нули, то результирующий цвет всей матрицы будет красный, чистый цвет, HEX(#ff0000),rgba(255,0,0,1) или rgba в % (100,0,0,1) Последняя строка,- это проценты прозрачности. "1" в этой строке соответствует 100% прозрачности. Пример окраски в красный цвет: С одноканальным (R) красным цветом оказалось всё просто. Также просто будет получить зеленый цвет (G), для этого нужно поставить 1 во второй строчке последнего столбца матрицы. Для подстановки значений в матрицу необходимо будет перевести шестнадцатеричные значения цветов (HEX) #26bf8c в rgba в % С помощью инженерного калькулятора переводим: шестнадцатеричное число26 это 38 в десятичной системе; bf - 191; 8c - 140 итого rgba(38,191,140) Переводим в проценты: (38/255)*100 = 15% Итого будут значения rgba в % (15,75,55,100) или для матрицы (0.15,0.75,0.55,1) 2# способ перевода из HEX значений цвета в rgba в % Этот способ намного проще, так как не надо ничего вычислять. Используется любая утилита, в которой есть возможность выбора и конвертирования цвета из одной формы записи в другую. Для этих целей я использовал ColorMania Копируем значение HEX цвета Нажимаем установку цвета (Set) Выбираем кодировку RGB % Value Забираем цифры в процентах и подставляем в виде - 1 соответствует 100% - 0.15,0.75,0.55,1 в последний, пятый столбец матрицы, как в первом способе выше.Ответ 2
Это коэффициенты смешения цветов. Каждая строка в матрице обозначает свой цветовой канал выходного изображения (красный, зелёный, синий и непрозрачность соответственно). Коэффициенты в строке означают степень влияния каждого из входных каналов на конкретный выходной. Однако коэффициентов пять, а каналов всего четыре. Это связано с тем, что вы, возможно, захотите не просто смешать цвета, но и сдвинуть результат вверх или вниз, сделав канал безусловно темнее или светлее. То есть последний коэффициент сдвигает чёрную точку цветового канала. В вашем случае: 1 0 0 0 0 rвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (0 * aвх) + 0 1 0 0 1 0 => gвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (1 * aвх) + 0 1 0 0 0 0 bвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (0 * aвх) + 0 0 1 0 1 0 aвых = (0 * rвх) + (1 * gвх) + (0 * bвх) + (1 * aвх) + 0 это означает следующее: Красный канал остаётся как есть. Зелёный формируется путём усреднения красного и синего каналов. Причём итоговая яркость будет в два раза выше исходной (так как оба исходных канала складываются на своей полной яркости) — результат может быть ярче максимально допустимого, что приведёт к отсечению значения. Синий канал отбрасывается и замещается красным. Альфа-канал (задающий непрозрачность) также складывается из двух каналов, зелёного и исходной альфы. То есть мы сохраняем исходную альфу, но теперь на степень непрозрачности влияют и зелёные оттенки. Как это можно сочетать и использовать — остаётся на ваше художественное и дизайнерское усмотрение.Ответ 3
Способ замещения RGB цвета CSS фильтрами. В ручную подбирать комбинацию фильтров CSS и их параметров довольно утомительное занятие. img { filter: invert(61%) sepia(10%) saturate(2853%) hue-rotate(109deg) brightness(101%) contrast(85%); }Но есть замечательный генератор, который можно скачать с Codepen или выполнить подборку фильтров онлайн. Всё просто — копируем нужный цвет и получаем подборку CSS фильтров, реализующих нужный цвет.
Комментариев нет:
Отправить комментарий