<feComponentTransfer>

La primitive de filtre SVG <feComponentTransfer> permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage.

Les calculs sont effectués sur les valeurs de couleur non prémultipliées. Chaque canal de couleur est modifié en utilisant le résultat des éléments <feFuncR>, <feFuncB>, <feFuncG>, et <feFuncA> placés à l'intérieur de la balise.

Contexte d'utilisation

Catégories	Élément de filtre
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre: `<feFuncA>`, `<feFuncR>`, `<feFuncB>`, `<feFuncG>`

Attributs

Attributs globaux

Attributs spécifiques

in

Interface DOM

Cet élément implémente l'interface SVGFEComponentTransferElement.

Exemple

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
  <defs>
    <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0" stop-color="#ff0000"></stop>
      <stop offset="0.2" stop-color="#ffff00"></stop>
      <stop offset="0.4" stop-color="#00ff00"></stop>
      <stop offset="0.6" stop-color="#00ffff"></stop>
      <stop offset="0.8" stop-color="#0000ff"></stop>
      <stop offset="1" stop-color="#800080"></stop>
    </linearGradient>
    <filter id="identity" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"></feFuncR>
        <feFuncG type="identity"></feFuncG>
        <feFuncB type="identity"></feFuncB>
        <feFuncA type="identity"></feFuncA>
      </feComponentTransfer>
    </filter>
    <filter id="table" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
        <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
        <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="linear" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
        <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
        <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="gamma" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
        <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
        <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>

  <g font-weight="bold">
    <text x="0" y="5%">Default</text>
    <rect x="0" y="8%" width="100%" height="20"></rect>
    <text x="0" y="26%">Identity</text>
    <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect>
    <text x="0" y="47%">Table lookup</text>
    <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect>
    <text x="0" y="68%">Linear function</text>
    <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect>
    <text x="0" y="89%">Gamma function</text>
    <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect>
  </g>
</svg>

CSS

rect {
  fill: url(#rainbow);
}

Résultat

Spécifications

Spécification	Statut	Commentaire
Filter Effects Module Level 1 La définition de '<feComponentTransfer>' dans cette spécification.	Version de travail	Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour `type` `identity`.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<feComponentTransfer>' dans cette spécification.	Recommendation	Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`feComponentTransfer`	Chrome Support complet Oui	Edge Support complet 12	Firefox Support complet Oui	IE Support complet Oui	Opera Support complet Oui	Safari ?	WebView Android Support complet Oui	Chrome Android Support complet Oui	Firefox Android Support complet Oui	Opera Android ?	Safari iOS ?	Samsung Internet Android Support complet Oui
`in`	Chrome Support complet Oui	Edge Support complet 12	Firefox Support complet Oui	IE Support complet Oui	Opera Support complet Oui	Safari ?	WebView Android Support complet Oui	Chrome Android Support complet Oui	Firefox Android Support complet Oui	Opera Android ?	Safari iOS ?	Samsung Internet Android Support complet Oui

Légende

Support complet: Support complet
Compatibilité inconnue: Compatibilité inconnue

Voir aussi

Dernière modification : Mar 18, 2019, par des contributeurs MDN