stop-color
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-color
CSS Eigenschaft definiert die Farbe für ein SVG <stop>
-Element innerhalb eines Gradienten. Wenn vorhanden, überschreibt sie das stop-color
Attribut des Elements.
Syntax
/* <color> values */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentcolor;
/* Global values */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;
Werte
Formale Definition
Initialer Wert | black |
---|---|
Anwendbar auf | stop elements in svg |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Definieren der Farbstopps von SVG-Gradienten
Dieses Beispiel zeigt die grundlegende Verwendung von stop-color
und wie die CSS stop-color
Eigenschaft den Vorrang vor dem stop-color
Attribut hat.
HTML
Wir haben ein SVG mit drei <rect>
Quadraten und drei <linearGradient>
Elementen. Jeder Gradient hat vier <stop>
Elemente, die Gradienten erstellen, die von schwarz zu weiß und dann von weiß zu grau verlaufen; der einzige Unterschied zwischen ihnen ist der id
Wert.
<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient1">
<stop offset="25%" stop-color="#000" />
<stop offset="40%" stop-color="#fff" />
<stop offset="60%" stop-color="#fff" />
<stop offset="75%" stop-color="#333" />
</linearGradient>
<linearGradient id="myGradient2">
<stop offset="25%" stop-color="#000" />
<stop offset="40%" stop-color="#fff" />
<stop offset="60%" stop-color="#fff" />
<stop offset="75%" stop-color="#333" />
</linearGradient>
<linearGradient id="myGradient3">
<stop offset="25%" stop-color="#000" />
<stop offset="40%" stop-color="#fff" />
<stop offset="60%" stop-color="#fff" />
<stop offset="75%" stop-color="#333" />
</linearGradient>
</defs>
<rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
<rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
<rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>
CSS
Wir fügen eine stroke
und stroke-width
hinzu, um das Rechteck zu umreißen. Wir definieren die Farben der ersten und letzten Stopps in jedem Gradient und überschreiben ihre stop-color
Attributwerte mit der stop-color
Eigenschaft. Verschiedene CSS <color>
Syntaxen werden gezeigt.
rect {
stroke: #333;
stroke-width: 1px;
}
#myGradient1 {
stop:first-of-type {
stop-color: #66ccff;
}
stop:last-of-type {
stop-color: #f4aab9;
}
}
#myGradient2 {
stop:first-of-type {
stop-color: yellow;
}
stop:last-of-type {
stop-color: purple;
}
}
#myGradient3 {
stop:first-of-type {
stop-color: hsl(0deg 100% 50%);
}
stop:last-of-type {
stop-color: hsl(20deg 100% 50%);
}
}
Ergebnisse
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StopColorProperty |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- SVG
stop-color
Attribut - Präsentationseigenschaften:
stop-color
,clip-rule
,color-interpolation-filters
,fill-opacity
,fill-rule
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-opacity
,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