color-interpolation
Die CSS-Eigenschaft color-interpolation
wird in SVG verwendet, um anzugeben, welcher Farbraum für die SVG-Elemente <linearGradient>
und <radialGradient>
verwendet werden soll.
Syntax
/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;
Werte
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. Dies ist der Standardwert, wenn keine
color-interpolation
-Eigenschaft festgelegt ist. linearRGB
-
Gibt an, dass die Farbinterpolation im linearisierten RGB-Farbraum erfolgen soll, wie in der sRGB-Spezifikation beschrieben.
Formale Definition
Wert | auto | sRGB | linearRGB |
---|---|
Gilt für | <linearGradient> und <radialGradient> |
Standardwert | auto |
Animierbar | diskret |
Formale Syntax
Beispiel
Im ersten SVG ist die Eigenschaft color-interpolation
nicht auf dem <linearGradient>
-Element enthalten und die Farbinterpolation erfolgt standardmäßig in sRGB
.
Das zweite Beispiel zeigt die Farbinterpolation mit dem Wert linearRGB
.
<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 # ColorInterpolationProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color-interpolation | ||||||||||||
linearGradient value | ||||||||||||
sRGB value |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
Siehe auch
<linearGradient>
<radialGradient>
- SVG-Attribut
color-interpolation