<feConvolveMatrix>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

Das<feConvolveMatrix>SVG Filterprimitive wendet einen Matrix-Faltungseffekt an. Eine Faltung kombiniert Pixel im Eingabebild mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildoperationen kann durch Faltungen erreicht werden, einschließlich Weichzeichnung, Kantenerkennung, Schärfung, Prägung und Abkantung.

Eine Matrixfaltung basiert auf einer n-mal-m-Matrix (dem Faltungskern), die beschreibt, wie ein bestimmter Pixelwert im Eingabebild mit seinen benachbarten Pixelwerten kombiniert wird, um einen resultierenden Pixelwert zu erzeugen. Jeder resultierende Pixel wird bestimmt, indem die Kernmatrix auf den entsprechenden Quellpixel und seine benachbarten Pixel angewendet wird. Die grundlegende Faltungsformel, die auf jeden Farbwert für einen bestimmten Pixel angewendet wird, ist:

{color}_{X, Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} {source}_{x - targetX + j, y - targetY + i} \cdot {kernelMatrix}_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot {alpha}_{x, y} \left(color\right)_{X , Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} \left(source\right)_{x - targetX + j , y - \mathit{targetY} + i} \cdot \left(kernelMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}

wobei „orderX“ und „orderY“ die X- und Y-Werte für dasorder Attribut darstellen und die anderen Variablen sich auf die AttributetargetX,targetY,kernelMatrix,divisor undbias beziehen.

Beachten Sie in den obigen Formeln, dass die Werte in der Kernmatrix so angewendet werden, dass die Kernmatrix relativ zu den Quell- und Zielbildern um 180 Grad gedreht wird, um mit der Faltungstheorie übereinzustimmen, wie sie in vielen Computer-Grafik-Lehrbüchern beschrieben wird.

Um dies zu veranschaulichen, nehmen Sie an, Sie haben ein Eingabebild, das 5 Pixel mal 5 Pixel groß ist, dessen Farbwerte für einen der Farbkanäle wie folgt sind:

0    20  40 235 235100 120 140 235 235200 220 240 235 235225 225 255 255 255225 225 255 255 255

und Sie definieren einen 3-mal-3-Faltungskern wie folgt:

1 2 34 5 67 8 9

Konzentrieren wir uns auf den Farbwert in der zweiten Reihe und der zweiten Spalte des Bildes (Quellpixelwert ist 120). Unter Annahme des einfachsten Falls (bei dem das Pixelraster des Eingabebildes perfekt mit dem Pixelraster des Kerns übereinstimmt) und Annahme von Standardwerten für die Attributedivisor,targetX undtargetY, wird der resultierende Farbwert sein:

(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)

Wie bei anderen Filter-Primitives werden die Farbkomponenten standardmäßig imlinearRGBFarbraum behandelt. Sie könnencolor-interpolation-filters verwenden, um stattdessensRGB zu nutzen.

Nutzungskontext

Kategorien	Primitives Filterelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: `<animate>`,`<set>`

<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>      <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>