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