SVG线性渐变不适用于值

Question

我正在尝试制作一个SVG量规，以在给定特定角度的情况下动态调整其linearGradient。我通过在定义的颜色数组上进行映射并渲染一个圆来创建弧。

我对linearGradient做了同样的操作，并动态地传入了值。但是，量规仍显示3种色块而不是渐变色。当我控制台日志颜色和nextCol我得到相同的阴影。当我硬编码停止颜色属性时，我看到了渐变。我在做任何明显错误的事情吗？

  var colForGradient = <defs>{colors.map((color, index) => {
            const nextCol = index < index.length - 1 ? colors[index + 1] : colors[index]
            console.log(index.length)
            if (!nextCol) {
                return null
            }
            console.log(nextCol, 'nextCol')
            console.log(color, 'color')
            return (

                <>
                <linearGradient key={index} id={`linearColors${index}`} x1={anglePoints[0]} y1={anglePoints[1]} x2={anglePoints[2]} y2={anglePoints[3]}>
                    <stop offset="0%" stop-color={color}></stop>
                    <stop offset="100%" stop-color={nextCol}></stop>
                </linearGradient>
                </>
            )
            // convert value to boolean and negate to true
        }).filter((comp) => !!comp)}</defs>


    console.log(colForGradient, 'colgrad')


        // define linear gradients in array and map over them, rendering each path?
        var arcs = <G fill="none">{colors.map((color, i) => <Arc
            cx={256}
            stroke={`url(#linearColors${i})`} 
            cy={256}
            key={i}
            strokeWidth={strokeWidth}
            color={color}
            strokeLinecap={strokeLinecap} 
            startAngle={angles[i]}
            endAngle={angles[i + 1]}
            transform={transformCircleToDialFromDown}
            onClick={() => arcClick(i)}
            className="hover-highlight"
            />
            )}</G>

        console.log(arcs, 'arcs')

        return (
            <>
                <Svg viewBox={viewBox} style={wrapperStyle}>

                    {arcs}
                    {colForGradient} 


                    <Arrow value={scaledValue} startAngle={angles[0]} endAngle={angles[angles.length - 1]} stroke={needleStroke}>
                    </Arrow>
                    <Circle stroke="#D27800" stroke-width="2" fill="#1D1E30" cx={256} cy={256} r="9" />
                </Svg>
            </>


        )
    }
}

export default Speedometer2;