kernelMatrix

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 Attribut kernelMatrix definiert die Liste von Zahlen, die die Kernel-Matrix für das <feConvolveMatrix>-Element bilden.

Werte werden durch Leerzeichen und/oder ein Komma getrennt. Die Anzahl der Einträge in der Liste muss gleich <orderX> mal <orderY> sein, wie im order-Attribut definiert.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1" />
  </filter>
  <filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1" />
  </filter>

  <image
    href="mdn_logo_only_color.png"
    width="200"
    height="200"
    style="filter:url(#convolveMatrix1);" />
  <image
    href="mdn_logo_only_color.png"
    width="200"
    height="200"
    style="filter:url(#convolveMatrix2); transform:translateX(220px);" />
</svg>

Anwendungshinweise

Wert <list of numbers>
Standardwert Keiner
Animierbar Ja
<list of numbers>

Die Liste von <number>n, die die Kernel-Matrix für die Faltung bilden. Werte werden durch Leerzeichen und/oder ein Komma getrennt. Die Anzahl der Einträge in der Liste muss <orderX> mal <orderY> sein.

Wenn das Ergebnis von orderX * orderY nicht gleich der Anzahl der Einträge in der Wertliste ist, fungiert die Filterprimitve als Pass-Through-Filter.

Spezifikationen

Specification
Filter Effects Module Level 1
# element-attrdef-feconvolvematrix-kernelmatrix

Browser-Kompatibilität