stroke-opacity

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> (en-US), <tref> (en-US), et <tspan>

Exemple

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

html

<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 la section 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 (en-US) ou placer le contour derrière le remplissage avec paint-order (en-US).

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # StrokeOpacity

Compatibilité des navigateurs

BCD tables only load in the browser