颜色插值

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

表示颜色插值应在线性化 RGB 颜色空间中进行，如 sRGB 规范 中所述。

正式定义

值 auto | sRGB | linearRGB
应用于 <linearGradient> 和 <radialGradient>
默认值 auto
可动画的 离散

正式语法

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

示例

在第一个 SVG 中，color-interpolation 属性未包含在 <linearGradient> 元素中，颜色插值默认为 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;
}

规范

规范
可缩放矢量图形 (SVG) 2
# 颜色插值

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅