SVG path各分段分配不同颜色 linearGradient实现异常排查

问题根源 #

你的代码有3个核心bug，导致渐变没法按路径分段匹配颜色：

• 空值搞坏了计算逻辑：原始数据里混了两个y: null的断点，算渐变偏移量之前没提前剔除这些无效点，null参与数值运算会直接生成NaN，后面算出来的渐变offset全是无效值，浏览器根本识别不了
• 偏移量计算逻辑完全错位：你配的是从左铺到右的水平线性渐变，渐变本身是沿着路径包围盒的x轴方向映射颜色的，但代码里居然累加y轴坐标算百分比，算出来的偏移量和路径实际位置完全对不上
• 渐变停点和路径段完全不匹配：你没先过滤无效点生成真实的渲染路径序列，渐变停点的数量、位置和实际画出来的路径段数根本对不上，颜色自然没法按段区分

修复方案 #

针对你示例里x坐标一直递增的折线场景，按下面的逻辑改就能出效果：

1. 先把所有y为null的无效点过滤掉，拿到真正用来画路径的点数组
2. 算出来有效路径的x轴总跨度（最右点x减最左点x），作为水平渐变的映射总长度
3. 遍历有效路径点，给每两个相邻点之间的线段配两个同色渐变停点，停点的offset对应当前段起点、终点的x值占总x跨度的百分比，相邻段在同一个偏移位置切换颜色，避免渐变过渡
4. 用过滤后的有效点拼path的d属性，别让空值混进去搞坏路径解析

修复后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG分段路径着色</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720">  

    </svg>
    <script>
        const svgns = 'http://www.w3.org/2000/svg';
        const svgVan = document.querySelector('svg');

        // 原始业务数据
        const array = [
            { x: 0, y: 80 },
            { x: 50, y: 20 },
            { x: 100, y: 50 },
            { x: 150, y: 30 },
            { x: 200, y: 40 },
            { x: 250, y: 90 },
            { x: 300, y: null },
            { x: 350, y: null },
            { x: 400, y: 20 },
            { x: 450, y: 70 },
            { x: 500, y: 60 },
        ];

        // 第一步：过滤无效断点
        const validPoints = array.filter(item => item.y !== null);
        // 第二步：计算x轴总跨度，作为水平渐变的映射基准
        const xMin = validPoints[0].x;
        const xMax = validPoints[validPoints.length - 1].x;
        const xRange = xMax - xMin;

        // 第三步：创建线性渐变
        const lnr = document.createElementNS(svgns, 'linearGradient')
        lnr.setAttribute('id', 'linearTest')
        lnr.setAttribute('x1', '0%')
        lnr.setAttribute('y1', '0%')
        lnr.setAttribute('x2', '100%')
        lnr.setAttribute('y2', '0%')
        svgVan.appendChild(lnr);

        const colorName = ["Blue", "Brown", "Crimson", "DarkCyan", "DarkMagenta", "DarkOliveGreen", "DarkOrchid", "DarkOrange", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGrey"]

        // 第四步：按路径段生成硬边渐变停点
        validPoints.forEach((point, i) => {
            const currentOffset = (point.x - xMin) / xRange;
            // 第一段起点固定在0%位置
            if (i === 0) {
                const startStop = document.createElementNS(svgns, 'stop');
                startStop.setAttribute('offset', 0);
                startStop.setAttribute('stop-color', colorName[i]);        
                lnr.appendChild(startStop)
            }
            // 当前段的终点停点
            const endStop = document.createElementNS(svgns, 'stop');
            endStop.setAttribute('offset', currentOffset);
            endStop.setAttribute('stop-color', colorName[i]);        
            lnr.appendChild(endStop);

            // 不是最后一段的话，在同一偏移位置放下一段的起点色，实现硬边切换无过渡
            if (i < validPoints.length - 1) {
                const nextStartStop = document.createElementNS(svgns, 'stop');
                nextStartStop.setAttribute('offset', currentOffset);
                nextStartStop.setAttribute('stop-color', colorName[i+1]);        
                lnr.appendChild(nextStartStop);
            }
        })

        // 第五步：生成路径
        const pathVal = 'M' + validPoints.map(point => `${point.x},${point.y}`).join(' L')
        const path = document.createElementNS(svgns, 'path');
        path.setAttribute('d', pathVal);
        path.setAttribute('fill', 'none')
        path.setAttribute('stroke', 'url(#linearTest)')
        path.setAttribute('stroke-width', '3px')
        path.style.transform = 'translate(100px, 400px)'
        svgVan.appendChild(path);
    </script>
</body>
</html>

扩展提示 #

如果你的路径不是x一直递增的形态（比如有往回折的线段、贝塞尔曲线段），水平线性渐变的方案会出现颜色错位。这种场景可以用path.getTotalLength()拿路径总长度，配合path.getPointAtLength()逐段算坐标，给渐变设置gradientUnits="userSpaceOnUse"做精确映射；更简单的方案是直接把路径拆成多个独立的path元素，每个单独设描边颜色，适配性更强。

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