Dans cet article
La balise <feComposite> est une primitive de filtre SVG utilisée pour combiner deux images ou couches graphiques selon une opération mathématique ou logique.
Elle permet, par exemple, de :
- masquer ;
- superposer ;
- ou fusionner ;
des éléments graphiques, offrant un contrôle précis sur leur interaction.
Bon à savoir
Utilisez <feComposite> pour appliquer des effets de masque, d'intersection ou de combinaison à vos graphiques SVG.
Structure et syntaxe de la balise <feComposite>
La balise <feComposite> s'utilise toujours dans une balise <svg>.
Voici un exemple simple :
HTML
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="compositeExample">
<feFlood flood-color="blue" result="blueFill" />
<feFlood flood-color="red" result="redFill" />
<feComposite in="blueFill" in2="redFill" operator="xor" result="combined" />
</filter>
</defs>
<rect x="10" y="10" width="180" height="180" filter="url(#compositeExample)" />
</svg>Dans cet exemple :
<feFlood>crée deux couches de couleurs (bleue et rouge) ;<feComposite>combine les deux couches avec l'opérateurxor(pour une exclusion mutuelle).
Voici notre résultat :
Attributs principaux de <feComposite>
| Attribut | Description | Valeurs possibles |
|---|---|---|
in | Spécifie la première source graphique à utiliser. | Peut être une source directe (ex. SourceGraphic) ou un résultat intermédiaire (défini par result dans d'autres primitives). |
in2 | Spécifie la deuxième source graphique à utiliser. | Idem que in. |
operator | Détermine l'opération mathématique ou logique appliquée pour combiner in et in2. |
|
k1, k2, k3, k4 | Coefficients pour personnaliser les calculs lors de l'utilisation de l'opérateur arithmetic. | Valeurs numériques. |
Compatibilité des navigateurs
La balise <feComposite> est prise en charge par la majorité des navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 10+) |