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 eines bestimmten Farbverlaufsstopps im SVG <stop> Element innerhalb eines SVG-Gradienten. Falls vorhanden, überschreibt sie das Attribut stop-opacity des Elements.

Der Eigenschaftswert beeinflusst den Alpha-Kanal des stop-color; er kann die Transparenz der Farbe eines <stop> erhöhen, aber nicht die durch die Eigenschaft stop-color definierte Farbe undurchsichtiger machen.

Hinweis: Die Eigenschaft stop-opacity gilt nur für <stop> Elemente, die in einem <svg> verschachtelt 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-Gradienten-<stop>-Elements angibt.

<number>

Ein numerischer Wert zwischen 0 und 1, einschließlich.

<percentage>

Ein Prozentwert zwischen 0% und 100%, einschließlich.

Mit 0 oder 0% eingestellt, ist der Stopp vollständig transparent. Mit 1 oder 100% eingestellt, hat das Element die volle Deckkraft des stop-color-Wertes, der möglicherweise teilweise undurchsichtig ist.

Formale Definition

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

Formale Syntax

Error: could not find syntax for this item

Beispiele

Die Deckkraft eines SVG-Farbverlaufsstops definieren

Dieses Beispiel demonstriert die grundlegende Anwendung von stop-opacity und wie die CSS-Eigenschaft stop-opacity das stop-opacity-Attribut übersteuert.

HTML

Wir haben ein SVG mit ein paar <polygon> Sternen und drei <linearGradient> Elementen: jedes hat drei <stop> Elemente, die drei Farbstopps definieren, die einen Verlauf von Blau nach Weiß zu Pink erzeugen; 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 Verlaufs-Hintergrund, der mit der fill Eigenschaft gesetzt wird; die id des Verlaufs ist der url() Parameter. Wir setzen magenta als Ersatzfarbe.

Wir definieren die Deckkraft der Stopps 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 hat eine Deckkraft von 80%, da die Farbstopps leicht durchsichtig sind; der stop-opacity: 0.8; hat den Attributwert stop-opacity="1" überstimmt. Die Füllung des letzten Sterns ist kaum wahrnehmbar mit Farbstopps, die eine Deckkraft von 25% haben. Beachten Sie, dass der Strich in allen Fällen dasselbe 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 einzigen <linearGradient> mit vollständig undurchsichtigen Stopps verwenden und für jedes <polygon> die Eigenschaft fill-opacity einstellen können.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# StopOpacityProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stop-opacity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch