Propriété CSS `flood-opacity`

Baseline Large disponibilité

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-opacity définit l'opacité 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-opacity de l'élément.

La valeur de la propriété agit sur le canal alpha de la flood-color ; elle peut augmenter la transparence d'une flood-color mais ne peut pas rendre la couleur définie par la propriété flood-color plus opaque.

Note : La propriété flood-opacity 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

css

/* Valeurs numériques et pourcentages */
flood-opacity: 0.2;
flood-opacity: 20%;

/* Valeurs globales */
flood-opacity: inherit;
flood-opacity: initial;
flood-opacity: revert;
flood-opacity: revert-layer;
flood-opacity: unset;

Valeurs

La valeur <opacity-value> est un <number> ou un <percentage> indiquant l'opacité de l'élément SVG <flood>.

<number>: Une valeur numérique comprise entre 0 et 1, inclus.
<percentage>: Une valeur en pourcentage comprise entre 0% et 100%, inclus.

Avec 0 ou 0%, le remplissage est totalement transparent. Avec 1 ou 100%, l'élément a l'opacité totale de la valeur flood-color, qui peut être partiellement opaque ou non.

Définition formelle

Valeur initiale	`black`
Applicabilité	éléments `<feFlood>` et `<feDropShadow>` dans `<svg>`
Héritée	non
Valeur calculée	la valeur définie, écrêtée à l'intervalle `[0,1]`
Type d'animation	par valeur calculée

Syntaxe formelle

flood-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Exemples

Définir l'opacité du remplissage d'un filtre

Cet exemple montre le cas d'utilisation basique de flood-opacity, et comment la propriété CSS flood-opacity prend le dessus sur l'attribut flood-opacity.

HTML

Nous avons un SVG avec plusieurs éléments <filter>, chacun contenant un enfant <feFlood>. Les <feFlood> définissent les filtres comme seagreen, le premier étant déclaré par son attribut flood-opacity comme totalement opaque et le second comme totalement transparent. Nous avons inclus deux éléments <rect>, chacun avec un attribut de filtre.

html

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" flood-opacity="1" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" flood-opacity="0" />
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

Nous définissons la height, la width, la x et la y, la position de nos rectangles avec le CSS, et nous incluons un dégradé linéaire répété comme background-image sur le SVG afin que l'opacité de la couleur de remplissage soit plus visible :

css

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 0px 10px
  );
}
rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}
#r2 {
  x: 150px;
}

Nous appliquons ensuite différentes valeurs d'opacité de remplissage aux éléments <feFlood> en utilisant la propriété CSS flood-opacity :

css

#flood1 feFlood {
  flood-opacity: 0.5;
}
#flood2 feFlood {
  flood-opacity: 90%;
}

Résultat

Les attributs définissaient le premier carré comme totalement opaque et le second comme totalement transparent, mais ces valeurs ont été remplacées par les valeurs CSS flood-opacity. Les filtres vert marin sont respectivement opaques à 50% et 90%.