stop-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die stop-opacity CSS Eigenschaft definiert die Deckkraft einer bestimmten Farbverlauf-Stop im SVG <stop>-Element innerhalb eines SVG-Verlaufs. Ist sie vorhanden, überschreibt sie das stop-opacity-Attribut des Elements.

Der Wert der Eigenschaft beeinflusst den Alpha-Kanal des stop-color; sie kann die Transparenz einer <stop>-Farbe erhöhen, jedoch nicht die durch die stop-color Eigenschaft definierte Farbe undurchsichtiger machen.

Hinweis: Die stop-opacity Eigenschaft gilt nur für <stop>-Elemente, die in einem <svg> eingebettet sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css
/* numeric and percentage values */
stop-opacity: 0.2;
stop-opacity: 20%;

/* Global values */
stop-opacity: inherit;
stop-opacity: initial;
stop-opacity: revert;
stop-opacity: revert-layer;
stop-opacity: unset;

Werte

Der <opacity-value> ist eine <number> oder <percentage>, die die Deckkraft des SVG-Verlaufs-<stop>-Elements angibt.

<number>

Ein numerischer Wert zwischen 0 und 1, inklusive.

<percentage>

Ein Prozentwert zwischen 0% und 100%, inklusive.

Beträgt der Wert 0 oder 0%, ist der Stop vollständig transparent. Beträgt der Wert 1 oder 100%, hat das Element die volle Deckkraft des stop-color-Wertes, welcher teilweise undurchsichtig sein kann oder nicht.

Formale Definition

Anfangswertblack
Anwendbar auf<stop> elements in <svg>
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

stop-opacity = 
<number> |
<percentage>

Beispiele

Die Deckkraft eines SVG-Farbverlaufsstopps definieren

Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von stop-opacity und wie die CSS-stop-opacity-Eigenschaft das stop-opacity-Attribut überlagert.

HTML

Wir haben ein SVG mit einigen <polygon>-Sternen und drei <linearGradient>-Elementen: jedes hat drei <stop>-Elemente, die drei Farb-Stops definieren, die einen Verlauf erzeugen, der von Blau zu Weiß zu Pink geht; der einzige Unterschied zwischen ihnen ist der id-Wert.

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

Wir fügen ein stroke und stroke-width hinzu, um die Polygonpfadlinie sichtbar zu machen.

Jedes polygon hat einen Farbverlaufs-Hintergrund, der mit der fill-Eigenschaft gesetzt wird; die id des Verlaufs ist der url()-Parameter. Wir setzen magenta als Rückfallfarbe.

Wir definieren die Deckkraft der Stops jedes Verlaufs mit der stop-opacity Eigenschaft.

Das SVG hat einen gestreiften Hintergrund, um die Transparenzeinstellungen deutlicher zu machen.

css
polygon {
  stroke: #333;
  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%;
}

Ergebnisse

Der erste Stern ist vollständig undurchsichtig. Die Füllung des zweiten Sterns ist 80% undurchsichtig, da die Farb-Stops leicht durchscheinend sind; die stop-opacity: 0.8; hat den stop-opacity="1"-Elementattributwert überlagert. Die Füllung des letzten Sterns ist kaum sichtbar mit Farb-Stops, die 25% undurchsichtig sind. Beachten Sie, dass der Strich in allen Fällen das gleiche undurchsichtige Dunkelgrau ist.

Hinweis: Da wir denselben stop-opacity-Wert für alle Geschwister-<stop>-Elemente im linearen Verlauf verwendet haben, hätten wir stattdessen einen einzelnen <linearGradient> mit vollständig undurchsichtigen Stops verwenden und für jedes <polygon> die fill-opacity-Eigenschaft setzen können.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# StopOpacityProperty

Browser-Kompatibilität

Siehe auch