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 ⁨April 2017⁩.

Die stop-color CSS Eigenschaft definiert die Farbe, die für ein <stop>-Element innerhalb eines SVG-Verlaufs verwendet werden soll. Falls vorhanden, überschreibt sie das stop-color-Attribut des Elements.

Hinweis: Die stop-color 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

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

Anfangswert	`black`
Anwendbar auf	`<stop>` elements in `<svg>`
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

stop-color = 
  <color>

Beispiele

Definieren der Farbstopps von SVG-Verläufen

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von stop-color und wie die CSS stop-color-Eigenschaft Vorrang vor dem stop-color-Attribut hat.

HTML

Wir haben ein SVG mit drei <rect>-Quadraten und drei <linearGradient>-Elementen. Jedes Gradient hat vier <stop>-Elemente, die Verläufe erzeugen, die von schwarz zu weiß und dann von weiß zu grau gehen; 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="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </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 einen stroke und stroke-width zur Umrandung des Rechtecks hinzu. Wir definieren die Farben der ersten und letzten Stopps in jedem Verlauf und überschreiben ihre stop-color-Attributwerte mit der stop-color-Eigenschaft. Verschiedene CSS <color>-Syntaxen werden gezeigt.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

rect {
  stroke: #333333;
  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 90% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 60% 50%);
  }
}

Ergebnisse

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # StopColorProperty

Browser-Kompatibilität

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, und vector-effect
opacity
background-color
<color>
<basic-shape> Datentyp

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden