<feBlend>

La primitive de filtre SVG <feBlend> permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut mode.

Contexte d'utilisation

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

Attributs

Attributs globaux

Attributs spécifiques

in
in2
mode

Interface DOM

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

Exemple

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
          flood-color="green" flood-opacity="1"/>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
    </filter>
  </defs>

  <image xlink:href="/files/6457/mdn_logo_only_color.png"
      x="10%" y="10%" width="80%" height="80%"
      style="filter:url(#spotlight);"/>
</svg>

Résultat

Spécifications

Spécification	Statut	Commentaire
Filter Effects Module Level 1 La définition de '<feBlend>' dans cette spécification.	Version de travail	Modes de fusion externalisés vers Compositing and Blending Level 1
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<feBlend>' dans cette spécification.	Recommendation	Définition initiale

Compatibilité des navigateurs

BCD tables only load in the browser