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

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

Cet attribut peut être appliqué à 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 40 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Opacité par défaut: 1 -->
  <circle cx="5" cy="5" r="4" stroke="green" />

  <!-- Définit l'opacité avec un nombre entre 0 et 1-->
  <circle cx="15" cy="5" r="4" stroke="green"
          stroke-opacity="0.7" />

  <!-- Définit l'opacité avec un pourcentage -->
  <circle cx="25" cy="5" r="4" stroke="green"
          stroke-opacity="50%" />
 
  <!-- Définit l'opacité comme propriété CSS -->
  <circle cx="35" cy="5" r="4" stroke="green"
          style="stroke-opacity: .3;" />
</svg>

Notes d'usage

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

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

Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut opacity ou placer le contour derrière le remplissage avec paint-order.

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écification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-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 'stroke-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,