<feConvolveMatrix>

Примитив фильтра <feConvolveMatrix> SVG применяет эффект матричной свёртки. Свёртка объединяет пиксели входного изображения с соседними пикселями, чтобы получить результирующее изображение. С помощью свёрток можно выполнять множество операций обработки изображений, включая размытие, обнаружение границ, повышение резкости, тиснение и создание рельефа.

Матричная свёртка основана на матрице размером n на m (ядре свёртки), которая описывает, как значение заданного пикселя входного изображения объединяется со значениями соседних пикселей для получения результирующего значения пикселя. Каждый результирующий пиксель определяется применением матрицы ядра к соответствующему исходному пикселю и его соседним пикселям. Базовая формула свёртки, применяемая к каждому цветовому значению заданного пикселя:

где «orderX» и «orderY» обозначают значения X и Y атрибута order, а остальные переменные относятся к атрибутам targetX, targetY, kernelMatrix, divisor и bias.

Обратите внимание, что в приведённых выше формулах значения матрицы ядра применяются таким образом, что матрица ядра поворачивается на 180 градусов относительно исходного и результирующего изображений. Это соответствует теории свёртки, описанной во многих учебниках по компьютерной графике.

Для примера предположим, что у вас есть входное изображение размером 5 на 5 пикселей со следующими значениями цвета для одного из цветовых каналов:

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255

и вы задаёте ядро свёртки размером 3 на 3 следующим образом:

1 2 3
4 5 6
7 8 9

Рассмотрим значение цвета во второй строке и втором столбце изображения (значение исходного пикселя — 120). Если предположить простейший случай (сетка пикселей входного изображения идеально совмещена с сеткой пикселей ядра) и использовать значения по умолчанию для атрибутов divisor, targetX и targetY, результирующее значение цвета будет следующим:

(9*0   + 8*20  + 7*40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

Как и другие примитивы фильтров, по умолчанию этот элемент обрабатывает цветовые компоненты в цветовом пространстве linearRGB цветовом пространстве. Чтобы использовать sRGB, можно задать атрибут color-interpolation-filters.

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

Атрибуты

• in
• order
• kernelMatrix
• divisor
• bias
• targetX
• targetY
• edgeMode
• kernelUnitLength
• preserveAlpha

Интерфейс DOM

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

Пример

SVG

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
        kernelMatrix="3 0 0
                      0 0 0
                      0 0 -3" />
    </filter>
  </defs>

  <image
    href="mdn.svg"
    x="0"
    y="0"
    height="200"
    width="200"
    filter="url(#emboss)" />
</svg>

Результат

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

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

См. также

• Атрибуты примитивов фильтров SVG
• <filter>
• <animate>
• <set>
• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• Руководство по SVG: эффекты фильтров