<feColorMatrix>

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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Das <feColorMatrix> SVG Filterelement verändert Farben basierend auf einer Transformationsmatrix. Der Farbwert jedes Pixels [R,G,B,A] wird durch eine 5x5 Farbmatrix matrixmultipliziert, um neue Farben [R',G',B',A'] zu erzeugen.

Hinweis: Das Prime-Symbol ' wird in der Mathematik verwendet, um das Ergebnis einer Transformation anzuzeigen.

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

Vereinfacht ausgedrückt wird im Folgenden gezeigt, wie jeder Farbkanal im neuen Pixel berechnet wird. Die letzte Zeile wird ignoriert, da ihre Werte konstant sind.

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

Betrachten Sie die Menge an Rot im neuen Pixel, also R':

Diese ergibt sich aus der Summe von:

  • r1 mal Rot des alten Pixels R,
  • r2 mal Grün des alten Pixels G,
  • r3 mal Blau des alten Pixels B,
  • r4 mal Alpha des alten Pixels A,
  • plus einer Verschiebung r5.

Diese angegebenen Mengen können beliebige reelle Zahlen sein, obwohl das endgültige R' zwischen 0 und 1 begrenzt wird. Das Gleiche gilt für G', B' und 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 ]

Wenn wir beispielsweise ein komplett schwarzes Bild röter machen möchten, können wir r5 eine positive reelle Zahl x machen, wodurch die Rötung jedes Pixels des neuen Bildes um x erhöht wird.

Eine Einheitsmatrix sieht folgendermaßen aus:

     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 |

In dieser wird jeder neue Wert genau 1 Mal seinen alten Wert enthalten, ohne dass etwas hinzukommt. Es wird empfohlen, von dieser Matrix aus mit den Manipulationen zu beginnen.

Wie andere Filter-Primitiven behandelt es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu nutzen.

Verwendungskontext

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

Attribute

  • in: Werte umfassen SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint oder eine Referenz auf ein anderes Filterprimitiv.
  • type: Werte umfassen matrix, saturate, hueRotate und luminanceToAlpha.
  • values: Der Wert für den in type angegebenen Matrixtyp.

DOM-Schnittstelle

Dieses Element implementiert die SVGFEColorMatrixElement Schnittstelle.

Beispiel

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>

Ergebnis

Spezifikationen

Specification
Filter Effects Module Level 1
# feColorMatrixElement

Browser-Kompatibilität

Siehe auch