color-interpolation

Die CSS-Eigenschaft color-interpolation wird in SVG verwendet, um anzugeben, welcher Farbraum für <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 den linearRGB-Farbraum für die Farbinterpolation auswä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. Standardwert, falls keine color-interpolation-Eigenschaft festgelegt 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
Anwendbar auf <linearGradient> und <radialGradient>
Standardwert auto
Animierbar diskret

Formale Syntax

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

Beispiel

Im ersten SVG ist die color-interpolation-Eigenschaft nicht im <linearGradient>-Element enthalten und die Farbinterpolation erfolgt standardmäßig im sRGB. Das zweite Beispiel zeigt die Farbinterpolation 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

Specification
Scalable Vector Graphics (SVG) 2
# ColorInterpolation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch