1. Web
  2. CSS
  3. Reference
  4. Properties
  5. color-interpolation

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

color-interpolation CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die color-interpolation CSS-Eigenschaft wird in SVG dazu verwendet, den Farbraum festzulegen, der 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 Benutzeragent entweder den sRGB- oder den linearRGB-Farbraum für die Farbsinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbsinterpolation in einem bestimmten Farbraum erfolgt.

sRGB

Gibt an, dass die Farbsinterpolation im sRGB-Farbraum erfolgen sollte. Dies ist der Standardwert, wenn keine color-interpolation-Eigenschaft festgelegt ist.

linearRGB

Gibt an, dass die Farbsinterpolation im linearisierten RGB-Farbraum erfolgen soll, wie in der sRGB-Spezifikation beschrieben.

Formale Definition

Wert auto | sRGB | linearRGB
Anwendbar auf <linearGradient> und <radialGradient>
Standardwert auto
Animierbar diskret

Formale Syntax

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB
Diese Syntax spiegelt den neuesten Standard gemäß CSS Specification wider. Möglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilität für Informationen zur Unterstützung.

Beispiel

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

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

Spezifikation
Scalable Vector Graphics (SVG) 2
# ColorInterpolationProperty

Browser-Kompatibilität

Siehe auch

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