<feColorMatrix>

Элемент фильтра <feColorMatrix> SVG изменяет цвета на основе преобразовательной матрицы. Значение цвета каждого пикселя [R,G,B,A] умножается на матрицу цвета 5x5 с помощью умножения матриц, чтобы создать новый цвет [R',G',B',A'].

Примечание: Признак ' в математике используется для обозначения результата преобразования.

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |

В упрощенном виде, ниже показано, как рассчитывается каждый цветовой канал нового пикселя. Последняя строка игнорируется, так как её значения являются постоянными.

R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5

Возьмём количество красного в новом пикселе, или R':

Это сумма:

r1 умноженное на красный цвет старого пикселя R,
r2 умноженное на зелёный цвет старого пикселя G,
r3 умноженное на синий цвет старого пикселя B,
r4 умноженное на альфа-канал старого пикселя A,
плюс сдвиг r5.

Эти указанные величины могут быть любыми действительными числами, хотя конечное значение R' будет ограничено значениями от 0 до 1. То же самое относится к G', B' и A'.

R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]

Если, например, мы хотим сделать полностью чёрный образ краснее, мы можем сделать значение r5 положительным действительным числом x, увеличивая красность каждого пикселя нового изображения на x.

Единичная матрица выглядит так:

     R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |

В ней каждое новое значение равно точно 1 умноженному на его старое значение, без добавления чего-либо ещё. Рекомендуется начать манипулирование матрицей с этого.

Контекст использования

Категории	Элемент примитивного фильтра
Разрешённое содержимое	Любое количество следующих элементов в любом порядке: `<animate>`, `<set>`

Атрибуты

in: Значения включают SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint, или ссылку на другой примитивный фильтр.
type: Значения включают matrix, saturate, hueRotate, и luminanceToAlpha.
values: Значение для типа матрицы, заданное в атрибуте type.

Интерфейс DOM

Этот элемент реализует интерфейс SVGFEColorMatrixElement.

Пример

SVG

html

<svg
  width="100%"
  height="100%"
  viewBox="0 0 150 500"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- identity matrix -->
  <filter id="colorMeTheSame">
    <feColorMatrix
      in="SourceGraphic"
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 70)"
    filter="url(#colorMeTheSame)" />
  <text x="70" y="120">Identity matrix</text>

  <!-- Combine RGB into green matrix -->
  <filter id="colorMeGreen">
    <feColorMatrix
      in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 140)"
    filter="url(#colorMeGreen)" />
  <text x="70" y="190">rgbToGreen</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 210)"
    filter="url(#colorMeSaturate)" />
  <text x="70" y="260">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 280)"
    filter="url(#colorMeHueRotate)" />
  <text x="70" y="330">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
  <text x="70" y="400">luminanceToAlpha</text>
</svg>

Результат

Спецификации

Спецификация
Модуль фильтров уровня 1 # feColorMatrixElement

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`feColorMatrix`	5	12	3	15	6	18	4	14	6	1.0	4.4
`in`	5	12	3	15	6	18	4	14	6	1.0	4.4
`type`	5	12	3	15	6	18	4	14	6	1.0	4.4
`values`	5	12	3	15	6	18	4	14	6	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix