Proprit CSS `stop-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.

En savoir plus
Voir la compatibilit complte

La proprit CSS stop-opacity dfinit l'opacit d'un arrt de couleur dans un lment SVG <stop> au sein d'un dgrad SVG. Si elle est prsente, elle remplace l'attribut stop-opacity de l'lment.

La valeur de la proprit impacte le canal alpha de stop-color ; elle peut augmenter la transparence de la couleur d'un <stop>, mais ne peut pas rendre la couleur dfinie par la proprit stop-color plus opaque.

Note : La proprit stop-opacity ne s'applique qu'aux lments SVG <stop> imbriqus dans un <svg>. Elle ne s'applique pas aux autres lments SVG, HTML ou pseudo-lments.

Dans cet article

Syntaxe
Dfinition formelle
Syntaxe formelle
Exemples
Dfinir l'opacit d'un arrt de couleur dans un dgrad SVG
Spcifications
Compatibilit des navigateurs
See also

Syntaxe

css

/* Valeurs numriques et pourcentages */
stop-opacity: 0.2;
stop-opacity: 20%;

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

Valeurs

La valeur <opacity-value> est un nombre (<number>) ou un pourcentage (<percentage>) indiquant l'opacit de l'lment <stop> du dgrad SVG.

<number>: Une valeur numrique comprise entre 0 et 1, inclusivement.
<percentage>: Une valeur en pourcentage comprise entre 0% et 100%, inclusivement.

Avec 0 ou 0%, l'arrt est entirement transparent. Avec 1 ou 100%, l'lment a l'opacit complte de la valeur stop-color, qui peut tre partiellement opaque ou non.

Dfinition formelle

Valeur initiale	`black`
Applicabilit	lments `<stop>` dans `<svg>`
Hrite	non
Valeur calcule	comme dfini
Type d'animation	discrte

Syntaxe formelle

stop-opacity = 
  <number>      |
  <percentage>

Exemples

Dfinir l'opacit d'un arrt de couleur dans un dgrad SVG

Cet exemple montre l'utilisation de base de stop-opacity et comment la proprit CSS stop-opacity prend le pas sur l'attribut stop-opacity.

HTML

Nous avons un SVG avec quelques <polygon> toiles et trois <linearGradient> lments : chacun a trois <stop> lments dfinissant trois arrts de couleur qui crent un dgrad allant du bleu au blanc puis au rose ; la seule diffrence entre eux est la valeur de leur id.

html

<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
  </defs>
  <polygon points="40,10 10,100 80,40 0,40 70,100" />
  <polygon points="125,10 95,100 165,40 85,40 155,100" />
  <polygon points="210,10 180,100 250,40 170,40 240,100" />
</svg>

CSS

Nous incluons un contour (stroke) et une largeur de contour (stroke-width) pour rendre la ligne du chemin du polygone visible.

Chaque polygon a un arrire-plan en dgrad dfini l'aide de la proprit fill ; l'identifiant (id) du dgrad est le paramtre de url(). Nous dfinissons magenta comme couleur de secours.

Nous dfinissons l'opacit des arrts de chaque dgrad l'aide de la proprit stop-opacity.

Le SVG a un arrire-plan ray pour rendre les paramtres de transparence plus apparents.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
  background: repeating-linear-gradient(
    to top left,
    white 0 9px,
    black 9px 10px
  );
}

css

polygon {
  stroke: #333333;
  stroke-width: 1px;
}
polygon:nth-of-type(1) {
  fill: url("#myGradient1") magenta;
}
polygon:nth-of-type(2) {
  fill: url("#myGradient2") magenta;
}
polygon:nth-of-type(3) {
  fill: url("#myGradient3") magenta;
}

#myGradient1 stop {
  stop-opacity: 1;
}
#myGradient2 stop {
  stop-opacity: 0.8;
}
#myGradient3 stop {
  stop-opacity: 25%;
}

Rsultats

La premire toile est entirement opaque. Le remplissage de la deuxime toile est opaque 80 % car les arrts de couleur sont lgrement translucides ; la valeur stop-opacity: 0.8; a remplac la valeur de l'attribut d'lment stop-opacity="1". Le remplissage de la dernire toile est peine visible avec des arrts de couleur opaques 25%. Notez que le contour est le mme gris fonc opaque dans tous les cas.

Note : Parce que nous avons utilis la mme valeur de stop-opacity pour tous les lments <stop> voisins dans le dgrad linaire, nous aurions pu utiliser un seul <linearGradient> avec des arrts entirement opaques, et dfinir une valeur pour la proprit fill-opacity de chaque <polygon> la place.

Spcifications

Spcification
Scalable Vector Graphics (SVG) 2 # StopOpacityProperty

Compatibilit des navigateurs

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 20 avr. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Proprit CSS stop-opacity

Dans cet article

HTML

CSS

Rsultats

Aider amliorer MDN

Proprit CSS `stop-opacity`