color-interpolation 属性控制 svg 元素内颜色混合、渐变和滤镜的色彩空间插值方式，默认 srgb，设为 linearrgb 可提升暗部渐变与半透明叠加的视觉线性度，但仅对 svg 渲染生效且须正确应用于 或 等 svg 元素。
color-interpolation 属性控制什么
它决定 SVG 元素内部颜色混合、渐变、滤镜等操作时，用哪种色彩空间做插值计算。默认是 sRGB，但设为 linearRGB 会让过渡更符合人眼感知的线性光强度变化——尤其在暗部渐变或叠加半透明色块时，linearRGB 能减少灰阶压缩和色带现象。
注意：这个属性只对 SVG 渲染生效，纯 HTML + CSS 的 background: linear-gradient() 或 color 过渡不受影响；浏览器也不会用它改变 CSS transition 中的颜色动画插值逻辑。
怎么写才真正起作用
color-interpolation 必须用在 SVG 元素上（如 <svg></svg>、<lineargradient></lineargradient>、<fecolormatrix></fecolormatrix>），且需配合支持该插值的渲染行为：
- 写在
<lineargradient></lineargradient> 上，会影响该渐变内部颜色停靠点（<stop></stop>）之间的插值
- 写在
<svg></svg> 根元素上，会作为整个 SVG 的默认插值方式（可被子元素覆盖）
- 不能用在 CSS 类里直接控制 SVG 子元素——必须内联或通过 CSS 的
color-interpolation 属性（仅部分浏览器支持，且仅限 SVG 元素）
<lineargradient></lineargradient> 上，会影响该渐变内部颜色停靠点（<stop></stop>）之间的插值<svg></svg> 根元素上，会作为整个 SVG 的默认插值方式（可被子元素覆盖）color-interpolation 属性（仅部分浏览器支持，且仅限 SVG 元素）示例：
<lineargradient id="grad" color-interpolation="linearRGB"><stop offset="0%" stop-color="#000"></stop><stop offset="100%" stop-color="#fff"></stop></lineargradient>
常见错误：为什么设了没效果
-
color-interpolation 不影响 CSS filter: blur() 或 drop-shadow() 的颜色混合——那些走的是另一套合成路径
- Chrome 和 Safari 对
color-interpolation: linearRGB 在滤镜中的支持不一致，Firefox 支持最完整；实测中 <fecomposite></fecomposite> 操作可能仍回退到 sRGB
- 把属性写成
color-interpolation: "linearRGB"（加引号）或 color-interpolation: linear-rgb（连字符）会导致解析失败，合法值只有 sRGB 和 linearRGB（大小写敏感）
- 在渐变中混用
stop-opacity 和 color-interpolation="linearRGB" 时，透明度插值仍按 sRGB 空间进行，不会自动“线性化”alpha 通道
替代方案：非 SVG 场景怎么办
如果只是想让 CSS 渐变更平滑，别碰 color-interpolation——它压根不生效。改用：
- CSS
color-mix()（现代浏览器）显式指定色彩空间：color-mix(in lch, red 50%, blue 50%)
- 把渐变导出为 PNG 或 WebP（启用 HDR 或宽色域），绕过浏览器插值逻辑
- 用 Canvas 2D 手动实现 linear-light 插值：读取像素、转
gamma 2.2 → linear → 插值 → gamma 2.2
实际效果差异往往只在低比特深度显示设备或精细灰阶过渡中暴露出来，多数网页设计可以忽略；但做数据可视化、医学图像叠加或印刷级预览时，linearRGB 是少数能真正影响输出保真度的底层开关之一。
color-interpolation 不影响 CSS filter: blur() 或 drop-shadow() 的颜色混合——那些走的是另一套合成路径color-interpolation: linearRGB 在滤镜中的支持不一致，Firefox 支持最完整；实测中 <fecomposite></fecomposite> 操作可能仍回退到 sRGBcolor-interpolation: "linearRGB"（加引号）或 color-interpolation: linear-rgb（连字符）会导致解析失败，合法值只有 sRGB 和 linearRGB（大小写敏感）stop-opacity 和 color-interpolation="linearRGB" 时，透明度插值仍按 sRGB 空间进行，不会自动“线性化”alpha 通道color-interpolation——它压根不生效。改用：
- CSS
color-mix()（现代浏览器）显式指定色彩空间：color-mix(in lch, red 50%, blue 50%) - 把渐变导出为 PNG 或 WebP（启用 HDR 或宽色域），绕过浏览器插值逻辑
- 用 Canvas 2D 手动实现 linear-light 插值：读取像素、转
gamma 2.2 → linear → 插值 → gamma 2.2
linearRGB 是少数能真正影响输出保真度的底层开关之一。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
