La balise <feFlood> est une primitive de filtre SVG qui remplit une région entière avec une couleur uniforme.
Elle est généralement utilisée en combinaison avec d'autres primitives pour créer des effets visuels personnalisés, comme des ombres ou des arrière-plans colorés.
Utilisez <feFlood> pour remplir une région avec une couleur spécifique et combinez-la avec d'autres filtres pour des effets plus complexes.
Structure et syntaxe de la balise <feFlood>
Exemple de base
Voici un exemple simple où <feFlood> remplit une région avec une couleur rouge :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="floodExample">
<feFlood flood-color="red" flood-opacity="0.5" />
</filter>
</defs>
<rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#floodExample)" />
</svg>Dans cet exemple :
flood-color="red"remplit la région avec une couleur rouge.flood-opacity="0.5"rend la couleur semi-transparente.
Voici le résultat :
Utilisation avec d'autres primitives
La balise <feFlood> est particulièrement utile lorsqu'elle est combinée avec des primitives comme <feComposite> pour limiter la couleur remplie à une zone spécifique :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="floodMaskExample">
<feFlood flood-color="yellow" flood-opacity="1" />
<feComposite in2="SourceAlpha" operator="in" />
</filter>
</defs>
<circle cx="100" cy="100" r="80" fill="blue" filter="url(#floodMaskExample)" />
</svg>Dans cet exemple :
<feFlood>remplit toute la région avec une couleur jaune.<feComposite>limite cette couleur à l'opacité de la forme (le cercle).
Essayez par vous-même :
Attributs principaux de <feFlood>
| Attribut | Description | Valeurs possibles |
|---|---|---|
flood-color | Définit la couleur de remplissage. | Nom de couleur, valeur HEX, ou valeur RGB (ex. red, #FF0000, rgb(255,0,0)). |
flood-opacity | Définit l'opacité de la couleur de remplissage. | Nombre entre 0 (transparent) et 1 (opaque). |
result | Donne un identifiant au résultat de cette primitive pour que le filtre puisse être réutilisé par d'autres filtres. | Nom arbitraire (ex. myFlood). |
Bonnes pratiques
Associez quand vous c'est possible votre balise <feFlood> avec <feComposite> pour contrôler où la couleur est appliquée.
Pensez aussi à toujours renseigner un attribut result pour pouvoir réutiliser cette primitive dans des filtres plus complexes.
Compatibilité des navigateurs
La balise <feFlood> est largement prise en charge par les navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 10+) |