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

BCD tables only load in the browser

Siehe auch