stroke-opacity

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.

La propriété CSS stroke-opacity définit l'opacité du contour d'une forme SVG. L'effet est identique à celui de opacity, sauf qu'il ne s'applique qu'au contour, et non à l'ensemble de l'élément. Si elle est présente, elle remplace l'attribut SVG stroke-opacity de l'élément.

Cette propriété s'applique aux formes SVG et aux éléments de contenu textuel (voir stroke-opacity pour une liste complète), mais en tant que propriété héritée, elle peut être appliquée à des éléments tels que <g> et avoir toujours l'effet souhaité sur les contours des éléments descendants.

Notez que le contour d'une forme recouvre partiellement le remplissage de cette forme, donc un contour avec une opacité inférieure à 1 affichera le remplissage mélangé avec le contour là où ils se chevauchent. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec la propriété opacity ou de placer le contour derrière le remplissage avec l'attribut paint-order.

Syntaxe

css

/* Valeurs numériques et pourcentages */
stroke-opacity: 1;
stroke-opacity: 0.3;
stroke-opacity: 50%;

/* Valeurs globales */
stroke-opacity: inherit;
stroke-opacity: initial;
stroke-opacity: revert;
stroke-opacity: revert-layer;
stroke-opacity: unset;

Valeurs

<number>: Tout nombre réel de 0 à 1 inclus. Une valeur de 0 rend le contour complètement transparent, et une valeur de 1 le rend complètement opaque. Les valeurs en dehors de l'intervalle 0 - 1 sont ramenées à la borne la plus proche de cet intervalle ; ainsi, les valeurs négatives sont ramenées à 0.
<percentage>: Identique à <number> (voir ci-dessus), sauf que l'intervalle autorisé est de 0 % à 100 % et que le découpage est effectué par rapport à cet intervalle.

Définition formelle

Valeur initiale	`1`
Applicabilité	éléments `<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>` et `<rect>` dans un `svg`
Héritée	oui
Valeur calculée	la valeur définie, écrêtée à l'intervalle `[0,1]`
Type d'animation	par type de valeur calculée

Syntaxe formelle

stroke-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Exemples

Différentes opacités de contour

Cet exemple montre l'utilisation basique de la propriété stroke-opacity et comment, comme le contour d'une forme recouvre partiellement son remplissage, un contour avec une opacité inférieure à 1 se mélange avec le remplissage là où ils se chevauchent.

HTML

Tout d'abord, nous définissons cinq chemins à segments multiples, qui utilisent tous un contour noir d'une largeur de un, et un remplissage dodgerblue pour les sous-chemins. Chaque chemin crée une série de symboles de montagne, allant de la gauche (un angle de coin peu prononcé) à la droite (un angle de coin très prononcé).

html

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="dodgerblue">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

À ces chemins, nous appliquons une valeur d'opacité de contour de plus en plus élevée. Pour les quatre premiers chemins, le remplissage peut être vu à travers la moitié intérieure du contour, bien que cela puisse être difficile à discerner pour le quatrième chemin. Pour le cinquième et dernier chemin, le contour est totalement opaque et le remplissage ne peut donc pas être vu à travers le contour.

css

g path:nth-child(1) {
  stroke-opacity: 0.2;
} /* equiv. 20% */
g path:nth-child(2) {
  stroke-opacity: 0.4;
} /* equiv. 40% */
g path:nth-child(3) {
  stroke-opacity: 0.6;
} /* equiv. 60% */
g path:nth-child(4) {
  stroke-opacity: 0.8;
} /* equiv. 80% */
g path:nth-child(5) {
  stroke-opacity: 1;
} /* equiv. 100% */

Résultat

Spécifications

Spécification
CSS Fill and Stroke Module Level 3 # stroke-opacity

Compatibilité des navigateurs

Voir aussi

La propriété opacity
La propriété fill-opacity
La propriété paint-order
La propriété raccourcie stroke
La propriété stroke-dasharray
La propriété stroke-dashoffset
La propriété stroke-linecap
La propriété stroke-linejoin
La propriété stroke-miterlimit
La propriété stroke-width
L'attribut SVG stroke-opacity

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 1 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu