<feBlend>
Baseline
Large disponibilité
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 <feBlend> permet de composer deux objets ensemble selon un mode de fusion donné, à la manière de ce que proposent les logiciels de retouche d'image pour fusionner deux calques. Le mode utilisé est défini par l'attribut mode.
Comme les autres primitives de filtres, elle traite les composantes colorimétriques dans l'espace colorimétrique linearRGB par défaut. L'attribut color-interpolation-filters permet d'utiliser sRGB à la place.
Contexte d'utilisation
Attributs
Interface DOM
Cet élément implémente l'interface SVGFEBlendElement.
Exemple
SVG
html
<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
href="mdn_logo_only_color.png"
x="10%"
y="10%"
width="80%"
height="80%"
filter="url(#spotlight)" />
</svg>
Résultat
Spécifications
| Spécification |
|---|
| Filter Effects Module Level 1 # feBlendElement |
Compatibilité des navigateurs
Voir aussi
- Attributs des primitives de filtres SVG
- L'élément
<filter> - L'élément
<animate> - L'élément
<set> - L'élément
<feColorMatrix> - L'élément
<feComponentTransfer> - L'élément
<feComposite> - L'élément
<feConvolveMatrix> - L'élément
<feDiffuseLighting> - L'élément
<feDisplacementMap> - L'élément
<feFlood> - L'élément
<feGaussianBlur> - L'élément
<feImage> - L'élément
<feMerge> - L'élément
<feMorphology> - L'élément
<feOffset> - L'élément
<feSpecularLighting> - L'élément
<feTile> - L'élément
<feTurbulence> - Tutoriel SVG : Effets de filtre