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 verwendet, um anzugeben, 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

Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:

auto

Gibt an, dass der Benutzeragent entweder den sRGB- oder linearRGB-Raum für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.

sRGB

Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll. Dies ist der Standardwert, wenn keine color-interpolation-Eigenschaft gesetzt ist.

linearRGB

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

Formale Definition

Wert auto | sRGB | linearRGB
Gilt für <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 im <linearGradient>-Element enthalten und die Farbinterpolation erfolgt standardmäßig im sRGB-Raum. 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

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