color-interpolation

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das Attribut color-interpolation legt den Farbraum für die Interpolation von Farbverläufen, Farbanimationen und Alpha-Compositing fest.

Hinweis: Bei Filtereffekten steuert die Eigenschaft color-interpolation-filters, welcher Farbraum verwendet wird.

Die Eigenschaft color-interpolation legt fest, ob Farboperationen im sRGB-Farbraum oder in einem linearisierten RGB-Farbraum (linear in Bezug auf die Lichtenergie) stattfinden. Im gewählten Farbraum wird für jede Komponente eine lineare Interpolation verwendet.

Wenn ein Kindelement mit einem Hintergrund gemischt wird, bestimmt der Wert der Eigenschaft color-interpolation auf dem Kindelement die Art der Mischung, nicht der Wert auf dem Elternelement. Bei Farbverläufen, die über das Attribut href oder das veraltete Attribut xlink:href auf einen anderen Farbverlauf verweisen, wird der Eigenschaftswert des Farbverlaufelements verwendet, auf das die Eigenschaft fill oder stroke direkt verweist. Bei Farbanimationen richtet sich die Farbinterpolation nach dem Wert der Eigenschaft color-interpolation auf dem animierten Element.

Hinweis: Als Präsentationsattribut hat color-interpolation auch eine entsprechende CSS-Eigenschaft: color-interpolation. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

Dieses Beispiel zeigt vier SVGs, die jeweils ein <rect>-Element enthalten und einen anderen Farbverlauf als Füllung für das <rect> verwenden. Die ersten beiden SVGs verwenden <linearGradient>-Elemente, die letzten beiden <radialGradient>-Elemente. In Browsern ohne Unterstützung sehen die Farbverläufe gleich aus.

Im ersten SVG ist das Attribut color-interpolation nicht auf dem <linearGradient>-Element angegeben. Daher gilt der Standardwert sRGB.

svg {
  display: block;
}

html

<svg width="450" height="70">
  <title>
    Example of linearGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientDefault">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientDefault)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

Im zweiten SVG ist das Attribut color-interpolation auf dem <linearGradient>-Element angegeben und auf linearRGB gesetzt.

html

<svg width="450" height="70">
  <title>
    Example of linearGradient using the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB"
  </text>
</svg>

Im dritten SVG ist das Attribut color-interpolation nicht auf dem <radialGradient>-Element angegeben. Daher gilt der Standardwert sRGB.

html

<svg width="450" height="70">
  <title>
    Example of radialGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="none">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#none)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

Im vierten SVG ist das Attribut color-interpolation auf dem <radialGradient>-Element angegeben und auf linearRGB gesetzt.

html

<svg width="450" height="70">
  <title>
    Example of radialGradient using the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="radLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#radLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB" (SVG attr)
  </text>
</svg>

Verwendungshinweise

Wert	`auto` \| `sRGB` \| `linearRGB`
Standardwert	`sRGB`
Animierbar	diskret

auto: Gibt an, dass der User Agent für die Farbinterpolation entweder den Farbraum sRGB oder linearRGB wählen kann. Diese Option bedeutet, dass keine Interpolation in einem bestimmten Farbraum erforderlich ist.
sRGB: Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll.
linearRGB: Gibt an, dass die Farbinterpolation im linearisierten RGB-Farbraum erfolgen soll, wie in der sRGB-Spezifikation beschrieben.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty

Browser-Kompatibilität

Siehe auch

<linearGradient>
<radialGradient>
CSS-Eigenschaft color-interpolation
sRGB-Spezifikation
color-interpolation-filters
Computer color is broken – eine anschauliche Demonstration von linearRGB

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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