<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
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
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.