Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<feColorMatrix>
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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]) estmultiplié 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
Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cet élément implémente l'interfaceSVGFEColorMatrixElement.
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> <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> <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> <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> <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> <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
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # feColorMatrixElement |