color-interpolation
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
CSS の color-interpolation プロパティは、SVG で用いられ、SVG 要素 <linearGradient> および <radialGradient> で用いる色空間を指定します。
構文
css
/* キーワード値 */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;
値
公式定義
| 値 | auto | sRGB | linearRGB |
|---|---|
| 適用対象 | <linearGradient> および <radialGradient> |
| 初期値 | auto |
| アニメーション | 可 (離散) |
形式文法
color-interpolation =
auto |
sRGB |
linearRGB
例
最初の SVG では、<linearGradient> 要素に color-interpolation プロパティが設定されておらず、色の補間はデフォルトの sRGB になります。
2 番目の例では、値 linearRGB を用いた色の補間を見せます。
html
<svg width="450" height="70">
<title>CSS プロパティ color-interpolation を用いる例</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">
color-interpolation なし (CSS プロパティ)
</text>
</svg>
html
<svg width="450" height="70">
<title>CSS プロパティ color-interpolation を用いる例</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 プロパティ)
</text>
</svg>
css
svg {
display: block;
}
#linearRGB {
color-interpolation: linearRGB;
}
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty |
ブラウザーの互換性
Loading…