fill-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

L'attribut fill-opacity définit l'opacité du remplissage (couleur, dégradé, motif, etc) appliqué à une forme.

Note : fill-opacity étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, et <tspan>

Exemple

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Opacité par défaut: 1 -->
  <circle cx="50" cy="50" r="40" />

  <!-- Définit l'opacité avec un nombre -->
  <circle cx="150" cy="50" r="40" fill-opacity="0.7" />

  <!-- Définit l'opaité avec un pourcentage -->
  <circle cx="250" cy="50" r="40" fill-opacity="50%" />

  <!-- Définit l'opacité avec une propriété CSS -->
  <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>

Notes d'utilisation

Valeur	`[0-1]` \| <percentage>
Valeur par défaut	`1`
Animation	Oui

Note : SVG2 introduit les valeurs en pourcentage pour fill-opacity. Cependant, ce n'est pas souvent pris en charge pour le moment (Voir la section Compatibilité des navigateurs ci-dessous). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle [0-1].

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # FillOpacity

Compatibilité des navigateurs

BCD tables only load in the browser