color-interpolation
CSS の color-interpolation
プロパティは、SVG で用いられ、SVG 要素 <linearGradient>
および <radialGradient>
で用いる色空間を指定します。
構文
css
/* キーワード値 */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;
値
公式定義
値 | auto | sRGB | linearRGB |
---|---|
適用対象 | <linearGradient> および <radialGradient> |
初期値 | auto |
アニメーション | 可 (離散) |
形式文法
例
最初の 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 # ColorInterpolation |
ブラウザーの互換性
BCD tables only load in the browser