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