color-interpolation
color-interpolation
属性は、グラデーションの補間、色のアニメーション、アルファ合成に用いる色空間を指定します。
メモ: フィルター効果については、color-interpolation-filters
プロパティで用いる色空間を制御します。
color-interpolation プロパティは、色の操作を sRGB 色空間で行うか (光のエネルギーがリニアな) linearized RGB 色空間で行うかを選択します。適切な色空間を選択したら、コンポーネント単位での補間を行います。
子要素が背景とブレンドされるときは、ブレンドの種類は親要素の color-interpolation
の値ではなく、子要素の color-interpolation
プロパティの値によって決まります。href
または廃止された xlink:href
属性で他のグラデーションを参照しているグラデーションでは、fill
または stroke
プロパティで直接参照されているグラデーション要素のプロパティの値を用います。色をアニメーションするときは、アニメーションが行われる要素の color-interpolation
プロパティの値に従って色の補間を行います。
メモ: プレゼンテーション属性なので、color-interpolation
は CSS のプロパティとして使用できます。
この属性は、以下の SVG 要素で使用できます。
使用上のメモ
例
この例では、4 個の SVG を見せます。それぞれの SVG には、<rect>
要素と、<rect>
を塗りつぶすのに用いる異なるグラデーションがあります。最初の 2 個の SVG では <linearGradient>
を用い、次の 2 個では <radialGradient>
要素を用います。未対応のブラウザーでは、グラデーションは同じに見えます。
最初の SVG では、<linearGradient>
要素に color-interpolation
属性は設定されておらず、デフォルト値の sRGB
が用いられます。
<svg width="450" height="70">
<title>color-interpolation 属性の無い linearGradient の例</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 設定なし
</text>
</svg>
この 2 番目の SVG では、<linearGradient>
要素に color-interpolation
属性が設定され、値は linearRGB
になっています。
<svg width="450" height="70">
<title>color-interpolation 属性を用いた linearGradient の例</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>
この 3 番目の SVG では、<radialGradient>
要素に color-interpolation
属性は設定されておらず、デフォルト値の sRGB
が用いられます。
<svg width="450" height="70">
<title>color-interpolation 属性なしの radialGradient の例</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 設定なし
</text>
</svg>
この 4 番目の SVG では、<radialGradient>
要素に color-interpolation
属性が設定され、値は linearRGB
になっています。
<svg width="450" height="70">
<title>color-interpolation 属性を用いた radialGradient の例</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 属性)
</text>
</svg>
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ColorInterpolation |
ブラウザーの互換性
BCD tables only load in the browser