color-interpolation

color-interpolation 属性指定渐变插值、颜色动画和 Alpha 合成的颜色空间。

注意：对于滤镜效果，color-interpolation-filters 属性控制使用哪个颜色空间。

color-interpolation 属性在 sRGB 颜色空间或（光能线性）线性化 RGB 颜色空间中发生的色彩运算之间进行选择。在选择了合适的颜色空间后，将使用分量线性插值。

当子元素混合到背景中时，子元素上 color-interpolation 属性的值决定混合类型，而不是父元素上 color-interpolation 的值。对于使用 href 或已弃用的 xlink:href 属性引用另一个渐变的渐变，渐变使用直接由 fill 或 stroke 属性引用的渐变元素中的属性值。在动画颜色时，颜色插值将根据正在动画处理的元素上的 color-interpolation 属性的值执行。

注意：作为展示属性，color-interpolation 可用作 CSS 属性。

您可以将此属性与以下 SVG 元素一起使用

使用说明

值 auto | sRGB | linearRGB
默认值 sRGB
可动画 离散
auto

指示用户代理可以选择 sRGB 或 linearRGB 空间进行颜色插值。此选项表示作者不需要颜色插值在特定颜色空间中发生。

sRGB

指示颜色插值应在 sRGB 颜色空间中发生。

linearRGB

指示颜色插值应在 sRGB 规范 中描述的线性化 RGB 颜色空间中发生。

示例

此示例显示了四个 SVG，每个 SVG 都包含一个 <rect> 元素，并使用不同的渐变作为 <rect> 的填充。前两个 SVG 使用 <linearGradient>，后两个使用 <radialGradient> 元素。在不支持的浏览器中，渐变看起来相同。

在此第一个 SVG 中，color-interpolation 属性未包含在 <linearGradient> 元素上，默认为 sRGB。

html
<svg width="450" height="70">
  <title>
    Example of linearGradient excluding the color-interpolation attribute
  </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 not set
  </text>
</svg>

在此第二个 SVG 中，color-interpolation 属性包含在 <linearGradient> 元素上，并设置为 linearRGB。

html
<svg width="450" height="70">
  <title>
    Example of linearGradient using the color-interpolation attribute
  </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>

在此第三个 SVG 中，color-interpolation 属性未包含在 <radialGradient> 元素上，默认为 sRGB。

html
<svg width="450" height="70">
  <title>
    Example of radialGradient excluding the color-interpolation attribute
  </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 not set
  </text>
</svg>

在此第四个 SVG 中，color-interpolation 属性包含在 <radialGradient> 元素上，并设置为 linearRGB。

html
<svg width="450" height="70">
  <title>
    Example of radialGradient using the color-interpolation attribute
  </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 attr)
  </text>
</svg>

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅