<feFlood>

Permet de remplir une région entière dans une image SVG avec une couleur sur une page HTML.

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 :

HTML

<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 :

HTML

<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+)