flood-color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS flood-color définit la couleur de la sous-région primitive du filtre en cours dans les éléments SVG <feFlood> et <feDropShadow> à l'intérieur d'un <filter>. Si elle est présente, elle remplace l'attribut SVG flood-color de l'élément.
Note :
La propriété flood-color ne s'applique qu'aux éléments SVG <feFlood> et <feDropShadow> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.
Syntaxe
/* Valeurs de type <color> */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentColor;
/* Valeurs globales */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
Valeurs
Définition formelle
| Valeur initiale | black |
|---|---|
| Applicabilité | <feFlood> and <feDropShadow> elements in <svg> |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value |
Syntaxe formelle
flood-color =
<color>
Exemples
Définir la couleur du remplissage d'un filtre
Cet exemple montre le cas d'utilisation basique de flood-color, et comment la propriété CSS flood-color prend le dessus sur l'attribut flood-color.
HTML
Nous avons un SVG avec deux éléments <filter>, chacun contenant un enfant <feFlood>. Chaque élément <feFlood> inclut l'attribut SVG flood-color qui définit la couleur du remplissage à seagreen. Nous avons inclus deux éléments <rect> avec un attribut de filtre ; c'est là que les filtres seront affichés.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" />
</filter>
<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
CSS
Nous définissons la taille et la position de notre <rect> à l'aide des propriétés CSS height, width, x et y :
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
Nous appliquons ensuite différentes valeurs de couleur de remplissage aux éléments <feFlood> en utilisant la propriété CSS flood-color. Nous utilisons une couleur nommée et une couleur hexadécimale à trois chiffres, mais il est possible d'utiliser n'importe quelle syntaxe de couleur CSS valide :
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #ff3366;
}
Résultat
Les attributs définissaient les carrés en vert marin, mais ces valeurs ont été remplacées par les valeurs CSS flood-color.
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # FloodColorProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
flood-opacity - La propriété
color - La propriété
fill - La propriété
lighting-color - La propriété
stop-color - La propriété
stroke - La propriété
box-shadow - La propriété
text-shadow - La propriété
background-color - Le type de donnée
<color> - Le type de donnée
<filter-function> - L'attribut SVG
flood-color