color-interpolation

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

Syntax

css

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

Werte

auto: Gibt an, dass der Benutzeragent entweder die Farbräume sRGB oder linearRGB 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. Dies ist der Standardwert, wenn keine color-interpolation-Eigenschaft festgelegt ist.
linearRGB: Gibt an, dass die Farbinterpolation im linearisierten 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

Im ersten SVG ist die Eigenschaft color-interpolation nicht auf dem <linearGradient>-Element enthalten und die Farbinterpolation erfolgt standardmäßig in sRGB. 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

BCD tables only load in the browser