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