How to get color of svg linearGradient at specific position

Question 1

AFAIK you cannot read a value off from a gradient as the gradient object do not expose methods to do so.

You can however create an off-screen canvas, draw a gradient and read the pixel value from there.

For example, lets create an object GradientReader. This allows us to instantiate it and embed methods and so forth:

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
    };
}

Now we can setup the object with the color stops.

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

We now have an object which mimics the gradient and all we need to do now is to call its method getColor() with a percentage value:

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

FIDDLE

Modify to your liking/needs.

Hope this helps!

Question 2

Here's my answer using the answer above in Angular 8 and some ES6 techniques.The new percentage is coming in through an observerable.

The HTML-file contains an SVG with two attributes linked to the class. Something like this:

<svg>
 <circle [attr.stroke]='strokeColor' [attr.fill]='fillColor'>
</svg>

app's Typescript file:

import {Component, Input, OnInit} from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-real-time-indicator',
  templateUrl: './real-time-indicator.component.html',
  styleUrls: ['./real-time-indicator.component.css']
})
export class RealTimeIndicatorComponent implements OnInit {

  @Input() percentagePassed$: Observable<number>;
  @Input() minutesRemaining$: Observable<number>;

  public currentPercentage: number;
  public minutesRemaining: number;
  private canvas2dContext: any;
  private canvas: any;

  public fillColor: string;
  public strokeColor: string;

  constructor() {

  }

  ngOnInit(): void {
    this.percentagePassed$.subscribe((newValue) => {
      this.currentPercentage = 100 - newValue;
      let [r, g, b]   = this.getColor( newValue);
      this.fillColor = `rgb(${r},${g},${b})`;

      [r, g, b]   = this.getColor( 100 - newValue);
      this.strokeColor = `rgb(${r},${g},${b})`;
    });
    this.canvas = document.createElement('canvas');     // create canvas element
    this.canvas2dContext = this.canvas.getContext('2d');                 // get context
    const gr = this.canvas2dContext.createLinearGradient(0, 0, 101, 0);   // create a gradient

    this.canvas.width = 101;                                // 101 pixels incl.
    this.canvas.height = 1;                                 // as the gradient

    const colorStops = [
      {stop: 0.0, color: 'lightgreen'},
      {stop: 0.9, color: 'orange'},
      {stop: 1.0, color: 'red'},
    ];

    for (const cs of colorStops)                       // add color stops
    {
      gr.addColorStop(cs.stop, cs.color);
    }

    this.canvas2dContext.fillStyle = gr;                                // set as fill style
    this.canvas2dContext.fillRect(0, 0, 101, 1);                        // draw a single line

  }

  // method to get color of gradient at % position [0, 100]
  getColor(percentage: number) {
    return this.canvas2dContext.getImageData(percentage , 0, 1, 1).data;
  }

}