stroke-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 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>

Exemple

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 ou placer le contour derrière le remplissage avec paint-order.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# StrokeOpacity

Compatibilité des navigateurs

BCD tables only load in the browser