color-interpolation

Das Attribut color-interpolation gibt den Farbraum für Farbverlaufsinterpolationen, Farbanimationen und Alpha-Compositing an.

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

Die Eigenschaft color-interpolation wählt zwischen Farroperationen, die im sRGB-Farbraum oder in einem (Lichtenergie linearen) linearisierten RGB-Farbraum stattfinden. Nachdem der entsprechende Farbraum gewählt wurde, wird eine komponentenweise lineare Interpolation verwendet.

Wenn ein Kindelement in einen Hintergrund eingemischt wird, bestimmt der Wert der Eigenschaft color-interpolation des Kindes den Mischtyp, nicht der Wert der color-interpolation des Elternteils. Für Farbverläufe, die das Attribut href oder das veraltete xlink:href verwenden, um auf einen anderen Farbverlauf zu verweisen, verwendet der Farbverlauf den Wert der Eigenschaft von dem Farbverlaufselement, das direkt durch die Eigenschaft fill oder stroke referenziert wird. Bei der Animation von Farben wird die Farbintepolation nach dem Wert der color-interpolation-Eigenschaft auf dem animierten Element durchgeführt.

Hinweis: Als Präsentationsattribut kann color-interpolation als CSS-Eigenschaft verwendet werden.

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

Hinweise zur Nutzung

Wert auto | sRGB | linearRGB
Standardwert sRGB
Animierbar diskret
auto

Gibt an, dass der Benutzeragent entweder den sRGB- oder den linearRGB-Raum für die Farbintepolation wählen kann. Diese Option gibt an, dass der Autor nicht erfordert, dass die Farbintepolation in einem bestimmten Farbraum erfolgt.

sRGB

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

linearRGB

Gibt an, dass die Farbintepolation im linearisierten RGB-Farbraum gemäß der sRGB-Spezifikation erfolgen soll.

Beispiel

Dieses Beispiel zeigt vier SVGs, die jeweils ein <rect>-Element enthalten und mit einem unterschiedlichen Gradienten als Füllung für das <rect> versehen sind. Die ersten beiden SVGs verwenden <linearGradient>, und die zweiten beiden verwenden <radialGradient>-Elemente. In nicht unterstützten Browsern sieht der Gradient gleich aus.

Im ersten SVG ist das color-interpolation-Attribut nicht im <linearGradient>-Element enthalten, was standardmäßig auf sRGB gesetzt ist.

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, was standardmäßig auf sRGB gesetzt ist.

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
# ColorInterpolation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch