title: How to get color of svg linearGradient at specific position
body: <p>I have a linear gradient that is used as percentage bar with a small ellipse that moves along the bar to show the current completion percentage. The completion percentage is updated via an AngularJS binding that calls a function.</p>
  
  <p>I need to change the color of the ellipse depending on the color of the gradient bar in the current position. Let'say the percentage is 80%, I need to get the color of the gradient at the 80% position.</p>
  
  <p>Is that possible?</p>
  
  <pre><code>&lt;svg height="20px" width="100%"&gt;
  &lt;defs&gt;
      &lt;linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
          &lt;stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /&gt;
          &lt;stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" /&gt;
          &lt;stop offset="100%" style="stop-color:rgb(79,189,0);stop-opacity:1" /&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;rect width="100%" height="3px" y="50%" fill="url(#gradient)" style="stroke-width:0" /&gt;
  &lt;rect width="30px" height="20px" x="{{calculateProfilePercentage()}}%" rx="8" ry="8" fill="rgb(249,166,31)" style="stroke-width:0" /&gt;
  &lt;/svg&gt;
  </code></pre>