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>

<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 Compatibilité des navigateurs ci-dessous). Il est par conséquent recommandé d'utiiser les valeurs de l'intervalle [0-1].

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'fill-opacity' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et le texte.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'fill-opacity' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,