color-interpolation

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

* 此特性的某些部分可能存在不同級別的支援。

color-interpolation CSS 屬性在 SVG 中用於指定 <linearGradient> 和 <radialGradient> SVG 元素要使用的顏色空間。

語法

css

/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

值

auto: 指示使用者代理可以選擇 sRGB 或 linearRGB 空間進行顏色插值。此選項表明作者不要求顏色插值發生在特定的色彩空間中。
sRGB: 表示顏色插值應在 sRGB 顏色空間中進行。如果未設定 color-interpolation 屬性，則預設為此初始值。
linearRGB: 表示顏色插值應在 sRGB 規範中描述的線性化 RGB 顏色空間中進行。

正式定義

值	`auto` \| `sRGB` \| `linearRGB`
應用於	`<linearGradient>` 和 `<radialGradient>`
預設值	`auto`
可動畫的	離散

正式語法

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

示例

在第一個 SVG 中，<linearGradient> 元素不包含 color-interpolation 屬性，顏色插值預設為 sRGB。第二個示例展示了使用 linearRGB 值進行顏色插值。

html

<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>

html

<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>

css

svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

規範

規範
Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容問題