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.
Syntax
/* 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
und1
, inklusive. <percentage>
-
Ein Prozentwert zwischen
0%
und100%
, 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
Anfangswert | black |
---|---|
Anwendbar auf | <stop> elements in <svg> |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
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.
<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.
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
- SVG
stop-opacity
-Attribut - Präsentationseigenschaften:
stop-opacity
,clip-rule
,color-interpolation-filters
,fill-opacity
,fill-rule
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-color
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,text-anchor
, undvector-effect
opacity
background-color
<color>
<basic-shape>
Datentyp