stroke-opacity
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 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 |