<feComposite>

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.

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 :

<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érateur xor (pour une exclusion mutuelle).

Voici notre résultat :

Attributs principaux de <feComposite>

Compatibilité des navigateurs

La balise <feComposite> est prise en charge par la majorité des navigateurs modernes :