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 表格僅在瀏覽器中載入

另請參閱