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 上查看此页面 • 报告此内容问题