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

Das <feColorMatrix> SVG Filterelement verändert Farben basierend auf einer Transformationsmatrix. Jeder Farbwert eines Pixels [R,G,B,A] wird mittels einer 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 zu kennzeichnen.

| 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 gesagt, wird jeder Farbkanal im neuen Pixel folgendermaßen berechnet. 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 des Rots im neuen Pixel, oder R':

Sie ist die Summe aus:

  • r1 mal dem Rotwert R des alten Pixels,
  • r2 mal dem Grünwert G des alten Pixels,
  • r3 mal dem Blauwert B des alten Pixels,
  • r4 mal dem Alphawert A des alten Pixels,
  • plus einer Verschiebung r5.

Diese angegebenen Beträge können beliebige reelle Zahlen sein, obwohl das finale R' zwischen 0 und 1 eingegrenzt wird. Dasselbe 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 zu einer positiven reellen Zahl x machen, und dadurch die Rotheit jedes Pixels im neuen Bild um x erhöhen.

Eine Einheitsmatrix sieht so 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 ihr ist jeder neue Wert genau 1-mal sein alter Wert, und es wird nichts hinzugefügt. Es wird empfohlen, bei der Manipulation der Matrix hier zu beginnen.

Verwendungskontext

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

Attribute

  • in: Werte umfassen SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint oder einen Verweis auf eine andere Filterprimitive.
  • type: Werte umfassen matrix, saturate, hueRotate und luminanceToAlpha.
  • values: Der Wert für den im Attribut type festgelegten 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

BCD tables only load in the browser

Siehe auch