color-interpolation

Das color-interpolation-Attribut legt den Farbraum für Farbverlaufsinterpolationen, Farbanimationen und Alphazusammenführungen fest.

Hinweis: Für Filtereffekte steuert die Eigenschaft color-interpolation-filters, welcher Farbraum verwendet wird.

Die color-interpolation-Eigenschaft wählt, ob Farbberechnungen im sRGB-Farbraum oder in einem linearisierten RGB-Farbraum (linear in Bezug auf die Lichtenergie) erfolgen. Nachdem der passende Farbraum ausgewählt wurde, wird eine komponentenweise lineare Interpolation durchgeführt.

Wenn ein Kindelement in einen Hintergrund gemischt wird, bestimmt der Wert der color-interpolation-Eigenschaft des Kindelements die Art der Mischung, nicht der Wert der color-interpolation-Eigenschaft des Elternelements. Bei Farbverläufen, die das href- oder das veraltete xlink:href-Attribut verwenden, um auf einen anderen Verlauf zu verweisen, verwendet der Verlauf den Eigenschaftswert des Gradientelements, das direkt von der fill- oder stroke-Eigenschaft referenziert wird. Beim Animieren von Farben wird die Farbinterpolation entsprechend dem Wert der color-interpolation-Eigenschaft des animierten Elements ausgeführt.

Hinweis: Als Präsentationsattribut hat color-interpolation auch ein entsprechendes CSS-Attribut: color-interpolation. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Hinweise zur Verwendung

Wert auto | sRGB | linearRGB
Standardwert sRGB
Animierbar diskret
auto

Gibt an, dass der Benutzeragent entweder den sRGB- oder den linearRGB-Farbraum für die Farbinterpolation wählen kann. Diese Option gibt an, dass der Autor nicht vorschreibt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgen muss.

sRGB

Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll.

linearRGB

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

Beispiel

Dieses Beispiel zeigt vier SVGs, jedes mit einem <rect>-Element und einem unterschiedlichen Farbverlauf, der als Füllung für das <rect> verwendet wird. Die ersten beiden SVGs verwenden <linearGradient>, und die zweiten beiden verwenden <radialGradient>. In nicht unterstützten Browsern sieht der Farbverlauf gleich aus.

Im ersten SVG ist das color-interpolation-Attribut nicht im <linearGradient>-Element enthalten und hat daher den Standardwert sRGB.

html
<svg width="450" height="70">
  <title>
    Example of linearGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientDefault">
      <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(#gradientDefault)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

Im zweiten SVG ist das color-interpolation-Attribut im <linearGradient>-Element enthalten und auf linearRGB gesetzt.

html
<svg width="450" height="70">
  <title>
    Example of linearGradient using the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientLinearRGB" color-interpolation="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(#gradientLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB"
  </text>
</svg>

Im dritten SVG ist das color-interpolation-Attribut nicht im <radialGradient>-Element enthalten und hat daher den Standardwert sRGB.

html
<svg width="450" height="70">
  <title>
    Example of radialGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="none">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#none)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

Im vierten SVG ist das color-interpolation-Attribut im <radialGradient>-Element enthalten und auf linearRGB gesetzt.

html
<svg width="450" height="70">
  <title>
    Example of radialGradient using the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="radLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#radLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB" (SVG attr)
  </text>
</svg>

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
sRGB

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