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.

La propriété CSS stop-opacity définit l'opacité d'un arrêt de couleur dans un élément SVG <stop> au sein d'un dégradé SVG. Si elle est présente, elle remplace l'attribut stop-opacity de l'élément.

La valeur de la propriété 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 définie par la propriété stop-color plus opaque.

Note : La propriété stop-opacity ne s'applique qu'aux éléments SVG <stop> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs numériques 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'élément <stop> du dégradé SVG.

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

Avec 0 ou 0%, l'arrêt est entièrement transparent. Avec 1 ou 100%, l'élément a l'opacité complète de la valeur stop-color, qui peut être partiellement opaque ou non.

Définition formelle

Valeur initiale	`black`
Applicabilité	éléments `<stop>` dans `<svg>`
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

stop-opacity = 
  <number>      |
  <percentage>

Exemples

Définir l'opacité d'un arrêt de couleur dans un dégradé SVG

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

HTML

Nous avons un SVG avec quelques <polygon> étoiles et trois <linearGradient> éléments : chacun a trois <stop> éléments définissant trois arrêts de couleur qui créent un dégradé allant du bleu au blanc puis au rose ; la seule différence 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 arrière-plan en dégradé défini à l'aide de la propriété fill ; l'identifiant (id) du dégradé est le paramètre de url(). Nous définissons magenta comme couleur de secours.

Nous définissons l'opacité des arrêts de chaque dégradé à l'aide de la propriété stop-opacity.

Le SVG a un arrière-plan rayé pour rendre les paramètres 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%;
}

Résultats

La première étoile est entièrement opaque. Le remplissage de la deuxième étoile est opaque à 80 % car les arrêts de couleur sont légèrement translucides ; la valeur stop-opacity: 0.8; a remplacé la valeur de l'attribut d'élément stop-opacity="1". Le remplissage de la dernière étoile est à peine visible avec des arrêts de couleur opaques à 25%. Notez que le contour est le même gris foncé opaque dans tous les cas.

Note : Parce que nous avons utilisé la même valeur de stop-opacity pour tous les éléments <stop> voisins dans le dégradé linéaire, nous aurions pu utiliser un seul <linearGradient> avec des arrêts entièrement opaques, et définir une valeur pour la propriété fill-opacity de chaque <polygon> à la place.

Spécifications

Spécification
Scalable Vector Graphics (SVG) 2 # StopOpacityProperty

Compatibilité des navigateurs

Aider à améliorer MDN

Apprendre à contribuer

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

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