SVG线性渐变仅在一条路径显示，另一条不显示的问题排查

我碰到过好几次类似的Chrome SVG渲染问题，这大概率是浏览器引擎对高精度路径坐标+自定义渐变的兼容性bug，给你拆解下原因和解决思路：

可能的触发原因 #

• 路径精度超出渲染阈值：Chrome的SVG渲染引擎在处理带有多位小数的路径坐标（比如d属性末尾的数值精度过高）时，会和自定义渐变的计算逻辑产生冲突。当坐标精度超过引擎内部的处理阈值，渐变的描边计算会出现异常，直接导致路径“消失”。
• 渐变与路径边界的计算偏差：自定义渐变的渲染是基于路径的边界盒（bounding box）来计算的，极细微的坐标差异可能让渐变的计算范围完全偏离路径的可视区域，看起来就像路径没显示。而改成纯色stroke时，不需要复杂的渐变坐标映射，所以能正常渲染；截断小数后，路径的边界盒回到了引擎能正确处理的范围，渐变也就恢复正常了。

可行的解决办法 #

• 统一路径坐标精度：把所有路径的d属性数值统一截断或四舍五入到2-3位小数，避免过高精度的数值。比如把d="M50.12345,100.67890"调整为d="M50.12,100.68"，这是最直接有效的办法。
• 调整渐变的单位设置：尝试修改渐变的gradientUnits属性，比如从默认的objectBoundingBox切换为userSpaceOnUse，或者反过来，让渐变的计算逻辑适配路径的坐标范围。
• 临时降级渐变实现：如果必须保留高精度路径，可以先把stroke改成纯色应急，或者将自定义渐变导出为图片，用url()引用图片作为描边填充（虽然这是妥协方案，但能快速解决显示问题）。

内容的提问来源于stack exchange，提问作者Kris Salvador