color-interpolation

CSS の color-interpolation プロパティは、SVG で用いられ、SVG 要素 <linearGradient> および <radialGradient> で用いる色空間を指定します。

構文

css
/* キーワード値 */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

auto

ユーザーエージェントが色の補間用に sRGB または linearRGB 空間を選択してよいことを表します。この値は、作成者が色の補間を特定の色空間で行うことを要求していないことを表します。

sRGB

色の補間を sRGB 色空間で行うべきであることを表します。 color-interpolation プロパティが設定されていない場合、初期値はこの値になります。

linearRGB

色の補間を sRGB の仕様書に記述されている通りの linearized RGB 色空間で行うべきであることを表します。

公式定義

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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

関連情報