javascript - 如何在特定位置获取svg linearGradient的颜色

Question

我有一个用作百分比条的线性渐变，带有一个沿条移动的小椭圆以显示当前完成百分比。完成百分比通过调用函数的 AngularJS 绑定(bind)更新。

我需要根据当前位置渐变条的颜色改变椭圆的颜色。假设百分比是 80%，我需要获取 80% 位置的渐变颜色。

这可能吗？

<svg height="20px" width="100%">
<defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(79,189,0);stop-opacity:1" />
    </linearGradient>
</defs>
<rect width="100%" height="3px" y="50%" fill="url(#gradient)" style="stroke-width:0" />
<rect width="30px" height="20px" x="{{calculateProfilePercentage()}}%" rx="8" ry="8" fill="rgb(249,166,31)" style="stroke-width:0" />
</svg>

Answer 1

据我所知，您无法从渐变中读取值，因为渐变对象不公开这样做的方法。

但是，您可以创建一个离屏 Canvas ，绘制渐变并从那里读取像素值。

例如，让我们创建一个对象 GradientReader。这允许我们实例化它并嵌入方法等等:

function GradientReader(colorStops) {

    const canvas = document.createElement('canvas');   // create canvas element
    const ctx = canvas.getContext('2d');               // get context
    const gr = ctx.createLinearGradient(0, 0, 101, 0); // create a gradient
    
    canvas.width = 101;                                // 101 pixels incl.
    canvas.height = 1;                                 // as the gradient

    for (const { stop, color } of colorStops) {               // add color stops
        gr.addColorStop(stop, color);
    }
    
    ctx.fillStyle = gr;                                // set as fill style
    ctx.fillRect(0, 0, 101, 1);                        // draw a single line
    
    // method to get color of gradient at % position [0, 100]
    return {
        getColor: (pst) => ctx.getImageData(pst|0, 0, 1, 1).data
    };
}

现在我们可以设置带有色标的对象。

const gr = new GradientReader([{stop: 0.0, color: '#f00'},
                               {stop: 0.5, color: '#ff0'},
                               {stop: 1.0, color: 'rgb(79,189,0)'}]);

我们现在有一个模仿渐变的对象，现在我们需要做的就是用百分比值调用它的方法 getColor():

const col = gr.getColor(pst);
el.style.backgroundColor = `rgb(${col[0]}, ${col[1]}, ${col[2]})`;

FIDDLE

根据您的喜好/需要进行修改。

希望这对您有所帮助!