La balise <feMergeNode> est utilisée à l'intérieur de la balise <feMerge>, une primitive de filtre SVG. Son rôle est de spécifier une entrée (ou plusieurs) qui sera combinée avec d'autres pour produire un effet visuel unique. En d'autres termes, elle "fusionne" différentes couches de filtres pour générer un rendu final.
Utilisez <feMergeNode> pour rassembler plusieurs effets de filtres en une seule image homogène.
Structure et syntaxe de la balise <feMergeNode>
Structure
Imaginons que vous créez un dessin où vous voulez combiner plusieurs effets comme une ombre douce et un dégradé de couleur.
Plutôt que de devoir choisir un effet au détriment de l'autre, la balise <feMergeNode> permet de les combiner.
Chaque <feMergeNode> ajoute une couche à l'effet final, comme si vous empiliez des feuilles transparentes les unes sur les autres pour créer un résultat harmonieux. 😉
Exemple de base
Voici un exemple simple où <feMergeNode> combine deux effets différents :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="mergeExample">
<feFlood flood-color="red" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#mergeExample)" />
</svg>Dans cet exemple :
<feFlood>génère une couche rouge.<feMergeNode>combine cette couche avec l'image originale (le rectangle bleu).
Voici le rendu :
Bonnes pratiques pour <feMergeNode>
Quand vous utilisez <feMergeNode>, pensez à ce que vous voulez montrer à votre utilisateur.
L'idée est de faire en sorte que les différents effets visuels fonctionnent bien ensemble.
Par exemple, si vous ajoutez une couleur rouge par-dessus une ombre grise, assurez-vous que l'ombre reste visible et que les deux éléments se complètent. C'est un peu comme peindre un tableau : chaque couche doit enrichir l'image sans la rendre confuse.
Une autre bonne pratique est de bien nommer les résultats intermédiaires de vos filtres (grâce à l'attribut result).
Cela vous aide à comprendre votre code, surtout si vous travaillez sur des effets complexes. Pensez aussi à tester vos filtres sur différents arrière-plans pour vérifier qu'ils fonctionnent bien partout.
Attributs principaux
| Attribut | Description | Valeurs possibles |
|---|---|---|
in | Spécifie quelle entrée ou couche utiliser pour ce nœud. | SourceGraphic, BackgroundImage, ou le result d'une primitive précédente. |
Compatibilité des navigateurs
La balise <feMergeNode> est prise en charge par les principaux navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 10+) |