<feColorMatrix>
===============

La primitive de filtre SVG **`<feColorMatrix>`** change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur [R,G,B,A]) est multiplié par matrice pour créer une nouvelle couleur:
```

| R' |     | a00 a01 a02 a03 a04 |   | R |
| G' |     | a10 a11 a12 a13 a14 |   | G |
| B' |  =  | a20 a21 a22 a23 a24 | * | B |
| A' |     | a30 a31 a32 a33 a34 |   | A |
| 1  |     |  0   0   0   0   1  |   | 1 |
```

Contexte d'utilisation
----------------------

|  |  |
| --- | --- |
| Catégories | Élément de primitive de filtre |
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre :`<animate>`, `<set>` (en-US) |

Attributs
---------

### Attributs globaux

* Attributs de base
* Attributs de présentation
* Attributs de primitive de filtre
* `class (en-US)`
* `style`
### Attributs spécifiques

* `in`
* `type (en-US)`
* `values (en-US)`
Interface DOM
-------------

Cet élément implémente l'interface `SVGFEColorMatrixElement` (en-US).

Exemple
-------

### SVG


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 150 360"
 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>

  <!-- matrix -->
  <filter id="colorMeMatrix">
    <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 70)"
 filter="url(#colorMeMatrix)" />
  <text x="70" y="120">matrix</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 140)"
 filter="url(#colorMeSaturate)" />
  <text x="70" y="190">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 210)"
 filter="url(#colorMeHueRotate)" />
  <text x="70" y="260">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" />
  <text x="70" y="320">luminanceToAlpha</text>
</svg>
```

### Résultat

| Screenshot | Live sample |
| --- | --- |
|  |  |

Spécifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # feColorMatrixElement |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `<filter>`
* `<animate>`
* `<set>` (en-US)
* `<feBlend>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* Tutoriel SVG: Filtres