<feConvolveMatrix>

Baseline Widely available

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

Das <feConvolveMatrix> SVG Filter-Primitive wendet einen Matrix-Faltungsfiltereffekt an. Eine Faltung kombiniert Pixel im Eingangsbild mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildbearbeitungsoperationen kann durch Faltungen erreicht werden, einschließlich Weichzeichnen, Kantenerkennung, Schärfen, Prägen und Abschrägen.

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

color X , Y = i = 0 orderY 1 j = 0 orderX 1 source x targetX + j , y targetY + i kernalMatrix orderX j 1, orderY i 1 divisor + bias 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(kernalMatrix\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 das order-Attribut darstellen, "targetX" den Wert des targetX-Attributs darstellt, "targetY" den Wert des targetY-Attributs darstellt, "kernelMatrix" den Wert des kernelMatrix-Attributs darstellt, "divisor" den Wert des divisor-Attributs darstellt und "bias" den Wert des bias-Attributs darstellt.

Beachten Sie in den obigen Formeln, dass die Werte in der Kernel-Matrix so angewendet werden, dass die Kernel-Matrix um 180 Grad gedreht ist relativ zu den Quell- und Zielbildern, um die Faltungstheorie wie in vielen Computer-Grafik-Lehrbüchern beschrieben zu erfüllen.

Zur Veranschaulichung nehmen wir an, Sie haben ein Eingangsbild mit 5 mal 5 Pixeln, dessen Farbwerte für einen der Farbkanäle wie folgt sind:

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

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

1 2 3
4 5 6
7 8 9

Konzentrieren wir uns auf den Farbwert in der zweiten Zeile und der zweiten Spalte des Bildes (Quellpixelwert ist 120). In der einfachsten Annahme (wo das Pixelgitter des Eingangsbildes perfekt mit dem Pixelgitter des Kerns übereinstimmt) und bei Annahme der Standardwerte für die Attribute 'divisor', 'targetX' und 'targetY', dann 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)

Verwendungskontext

KategorienPrimitives Filterelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<animate>, <set>

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFEConvolveMatrixElement-Schnittstelle.

Beispiel

SVG

html
<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"
    style="filter:url(#emboss);" />
</svg>

Ergebnis

Spezifikationen

Specification
Filter Effects Module Level 1
# feConvolveMatrixElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch