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.

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

Syntax

css
/* <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

<color>

Die Farbe der Füllung. Dies kann jeder gültige CSS <color> Wert sein.

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

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.

html
<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.

css
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

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-color

Legend

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

Full support
Full support

Siehe auch