JS动态创建SVG线性渐变硬停 标记一致但渲染效果不符

核心错误出在创建第二个渐变停止点（stop）的代码行：

const stop2 = document.createElementNS('svgns', 'stop');

你给createElementNS传入的第一个参数加了引号，把预先定义的SVG命名空间变量svgns写成了字符串字面量'svgns'，这是个无效的命名空间地址。

这会导致你创建的所有stop2元素都不属于合法的SVG命名空间，虽然在DOM检查器里能看到这些节点挂在linearGradient下，但SVG渲染引擎会直接忽略这些无效节点，最终渐变只识别到每个颜色对应的第一个stop点，自然渲染成平滑过渡的普通渐变，而不是预期的硬停分块效果。

1. 去掉createElementNS第一个参数里svgns的引号，传入正确的命名空间变量
2. （可选但推荐）给offset属性值加上百分比单位，避免个别浏览器对0-1浮点数的解析歧义

修正后的循环代码如下：

color.forEach(
    (a, i) => {
        const stop1 = document.createElementNS(svgns, 'stop');
        stop1.setAttribute('offset', `${(i / color.length) * 100}%`);
        stop1.setAttribute('stop-color', a);
        lg.appendChild(stop1)

        const stop2 = document.createElementNS(svgns, 'stop');
        stop2.setAttribute('offset', `${((i + 1) / color.length) * 100}%`);
        stop2.setAttribute('stop-color', a);
        lg.appendChild(stop2)
    }
)

替换原有对应代码后，即可得到四个纯色硬切分块的渐变效果。

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