color-interpolation

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

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

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

Wenn ein Kindelement in einen Hintergrund eingeblendet wird, bestimmt der Wert der Eigenschaft color-interpolation auf dem Kind den Typ der Überblendung, nicht der Wert der color-interpolation auf dem Elternteil. Für Verläufe, die das href- oder das veraltete xlink:href-Attribut verwenden, um auf einen anderen Verlauf zu verweisen, verwendet der Verlauf den Eigenschaftswert von dem durch die fill- oder stroke-Eigenschaft direkt referenzierten Verlaufs-Element. Beim Animieren von Farben wird die Farbinterpolation gemäß 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:

Nutzungshinweise

Wert auto | sRGB | linearRGB
Standardwert sRGB
Animierbar diskret
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.

linearRGB

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

Beispiel

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

In diesem ersten SVG ist das color-interpolation-Attribut nicht im <linearGradient>-Element enthalten, was standardmäßig sRGB 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>

In diesem 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>

In diesem dritten SVG ist das color-interpolation-Attribut nicht im <radialGradient>-Element enthalten, was standardmäßig sRGB 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>

In diesem 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