SVG线性渐变中stop-color不生效，主因是父元素未设fill="url(#id)"、漏写stop-opacity="1"，或offset格式错误（须带%）；stop-color仅在<stop>内有效，不可写在<linearGradient>上。
SVG线性渐变里stop-color不生效？检查stop-opacity和父元素fill
常见错误是写了stop-color但颜色完全没显示，或者只看到一种颜色。最常踩的坑是：父元素（比如<rect>或<path>）没设fill="url(#myGradient)"，或者漏了stop-opacity="1"——尤其当渐变定义在<defs>里且被复用时，某些浏览器会继承父级透明度。另外，stop-color只在<stop>标签内起作用，不能写在<linearGradient>上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
stop-color必须配合offset使用，否则默认堆在0%位置，视觉上像单色 - 确保
<stop>在<linearGradient>内部，且offset值为0%、50%、100%这类合法格式（不能写0.5不带%） - 如果用CSS控制SVG，
fill属性优先级高于内联fill，记得检查计算样式是否被覆盖
CSS background-image: linear-gradient() vs SVG <linearGradient>选哪个
核心区别不在“能不能做”，而在“谁控制映射精度”。CSS渐变靠像素插值，适合背景、卡片、按钮等；SVG渐变绑定到几何路径，能精确到每个锚点、每段贝塞尔曲线，适合数据可视化里的热力图、地图色带、波形图着色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要做响应式颜色映射（比如根据数值动态算
offset），用JS操作SVG的<stop>元素比拼CSS字符串更稳定 - CSS渐变不支持
stop-color的JS动态读写，只能重设整个background-image字符串，易出错 - SVG渐变可复用、可动画
offset和stop-color，CSS中linear-gradient()的色标无法单独动画
用stop-color实现非均匀颜色映射：关键在offset不是等分
很多人以为渐变就是从A到B平滑过渡，但真实场景常需要“某段区域颜色变化剧烈，另一段几乎不变”——比如温度图里0℃~5℃用深蓝→浅蓝，20℃~30℃用黄→红，中间10℃~15℃保持恒定橙色。这就得靠非等距offset。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
offset当成归一化坐标：0%对应最小值，100%对应最大值，中间点按实际数据比例换算（例如数据范围0~100，想让60℃占到80%位置，就设offset="80%"） - 两个
<stop>之间颜色是线性插值，但人眼对明度敏感，深色到亮色的过渡要加更多中间停点（比如#000→#fff至少设3个<stop>） - 别依赖浏览器自动补间：Chrome和Firefox对
offset超出[0%,100%]的处理不一致，严格限制在范围内
IE11或旧版Safari里stop-color失效？兼容性绕过方案
IE11支持SVG渐变但不支持stop-color的CSS变量（如stop-color: var(--main)），旧版Safari（offset小数精度有bug（offset="0.3333"可能被截断）。这不是写法错，是渲染引擎限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在
<stop>里用CSS变量，改用内联写死或JS注入 -
offset统一用百分比格式（"33%"而非"0.33"），并四舍五入到整数位（"33%"比"33.3333%"更稳） - 必要时降级：检测
SVGElement.prototype.hasAttribute存在性，fallback为CSS渐变+伪元素遮罩
stop，而是把业务语义（比如“高温区”“安全阈值”）准确翻译成offset数值，再扛住不同缩放、不同DPR下的像素对齐。这点连Chrome DevTools的渐变预览都经常不准。 
