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

Beispiel

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-interpolation
linearGradient value
sRGB value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

Siehe auch