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
oderlinearRGB
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.
<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.
<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.
<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.
<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
<linearGradient>
<radialGradient>
- CSS
color-interpolation
-Eigenschaft - sRGB-Spezifikation
color-interpolation-filters
- Computer color is broken - populäre Demonstration von linearRGB