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 屬性對應項：color-interpolation。當兩者都指定時，CSS 屬性具有優先權。
你可以將此屬性與以下 SVG 元素一起使用
用法說明
| 值 | auto | sRGB | linearRGB |
|---|---|
| 預設值 | sRGB |
| 可動畫的 | 離散 |
示例
此示例顯示了四個 SVG，每個 SVG 都有一個 <rect> 元素和一個不同的漸變用作 <rect> 的填充。前兩個 SVG 使用 <linearGradient>，後兩個 SVG 使用 <radialGradient> 元素。在不支援的瀏覽器中，漸變看起來相同。
在第一個 SVG 中，<linearGradient> 元素上未包含 color-interpolation 屬性，它預設為 sRGB。
<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 中，<linearGradient> 元素上包含了 color-interpolation 屬性，並設定為 linearRGB。
<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 中，<radialGradient> 元素上未包含 color-interpolation 屬性，它預設為 sRGB。
<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 中，<radialGradient> 元素上包含了 color-interpolation 屬性，並設定為 linearRGB。
<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>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty |
瀏覽器相容性
載入中…
另見
<linearGradient><radialGradient>- CSS
color-interpolation屬性 - sRGB 規範
color-interpolation-filters- Computer color is broken - linearRGB 的流行演示