title: Can I apply a gradient along an SVG path?
body: <p>I'd like to put a simple loading indicator on my website that's triggered by a script. It should be a simple circle arc that's got a gradient and is spinning while the user is waiting. I haven't tried the animation part, but got stuck on the static styling for now. Here's what I've got so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"&gt;
          &lt;defs&gt;
              &lt;linearGradient id="grad1"&gt;
                  &lt;stop offset="0%" stop-color="red"/&gt;
                  &lt;stop offset="100%" stop-color="red" stop-opacity="0" /&gt;
              &lt;/linearGradient&gt;
          &lt;/defs&gt;
          &lt;path d="M50 10  A40 40 0 1 0 90 50"
              stroke="url(#grad1)" stroke-width="10" fill="transparent"/&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It draws the arc, from the top edge anti-clockwise to the right edge (270°), but the gradient is wrong. Instead of following the path so that the beginning (top edge, 0°) is opaque and the end (right edge, 270°) is transparent, the resulting image of the arc stroke is coloured from left to right in screen space.</p>
  
  <p>How can I make the gradient follow my arc path?</p>