color-interpolation

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

* Some parts of this feature may have varying levels of support.

Die CSS-Eigenschaft color-interpolation wird in SVG verwendet, um festzulegen, welcher Farbraum für die <linearGradient> und <radialGradient> SVG-Elemente verwendet werden soll.

Syntax

css

/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

Werte

auto: Gibt an, dass der User Agent entweder den sRGB- oder linearRGB-Farbraum für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht erfordert, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
sRGB: Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll. Wird standardmäßig auf diesen Anfangswert zurückgesetzt, wenn keine color-interpolation-Eigenschaft gesetzt ist.
linearRGB: Gibt an, dass die Farbinterpolation im linearen RGB-Farbraum gemäß der sRGB-Spezifikation erfolgen soll.

Formale Definition

Wert	`auto` \| `sRGB` \| `linearRGB`
Gilt für	`<linearGradient>` und `<radialGradient>`
Standardwert	`auto`
Animierbar	diskret

Formale Syntax

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

Im ersten SVG ist die Eigenschaft color-interpolation nicht im <linearGradient>-Element enthalten, und die Farbinterpolation wird standardmäßig auf sRGB gesetzt. Das zweite Beispiel zeigt die Farbinterpolation mit dem Wert linearRGB.

html

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="sRGB">
      <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(#sRGB)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    no color-interpolation (CSS property)
  </text>
</svg>

html

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="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(#linearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation: linearRGB; (CSS property)
  </text>
</svg>

css

svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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