color-interpolation
Die CSS-Eigenschaft color-interpolation
wird in SVG verwendet, um anzugeben, welcher Farbraum für <linearGradient>
und <radialGradient>
SVG-Elemente verwendet werden soll.
Syntax
/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;
Werte
auto
-
Gibt an, dass der User-Agent entweder den
sRGB
- oder denlinearRGB
-Farbraum für die Farbinterpolation auswählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt. sRGB
-
Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll. Standardwert, falls keine
color-interpolation
-Eigenschaft festgelegt ist. linearRGB
-
Gibt an, dass die Farbinterpolation im linearen RGB-Farbraum erfolgen soll, wie in der sRGB-Spezifikation beschrieben.
Formale Definition
Wert | auto | sRGB | linearRGB |
---|---|
Anwendbar auf | <linearGradient> und <radialGradient> |
Standardwert | auto |
Animierbar | diskret |
Formale Syntax
Beispiel
Im ersten SVG ist die color-interpolation
-Eigenschaft nicht im <linearGradient>
-Element enthalten und die Farbinterpolation erfolgt standardmäßig im sRGB
. Das zweite Beispiel zeigt die Farbinterpolation mit dem linearRGB
-Wert.
<svg width="450" height="70">
<title>Example of using the color-interpolation CSS Property</title>
<defs>
<linearGradient id="sRGB">
<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(#sRGB)" stroke="black" />
<text x="0" y="60" font-family="courier" font-size="16">
no color-interpolation (CSS property)
</text>
</svg>
<svg width="450" height="70">
<title>Example of using the color-interpolation CSS Property</title>
<defs>
<linearGradient id="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(#linearRGB)"
stroke="black" />
<text x="0" y="60" font-family="courier" font-size="16">
color-interpolation: linearRGB; (CSS property)
</text>
</svg>
svg {
display: block;
}
#linearRGB {
color-interpolation: linearRGB;
}
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ColorInterpolation |
Browser-Kompatibilität
BCD tables only load in the browser