title: How to create a transparency gradient mask using an SVG filter
body: <p>I am currently using an SVG gradient to apply a fade-out effect for paths.  This allows the path to start at 100% opacity at x0 and fade out to 0% at x1, wherever those may be for the particular path it is applied to:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
      &lt;linearGradient id="gradient_to_transparent" x1="0%" x2="100%"&gt;
          &lt;stop offset="0" stop-opacity="1"&gt;&lt;/stop&gt;
          &lt;stop offset="1" stop-opacity="0"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
  
      &lt;path
          d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
          style="stroke:url(#gradient_to_transparent);"
      /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works great when applying to the stroke style of the above path.</p>
  
  <p>However, the problem is that by using the stroke style I cannot apply other stroke styles and it defaults to black.  What I would like is to style the stroke using whatever color I want and then apply a gradient to the stroke-opacity or apply an SVG filter to create the fade-out effect.  I tried messing with SVG filters and using feComponentTransfer with feFuncA, but wasn't able to get something that worked right.</p>
  
  <p>The stroke color needs to be individually calculated for each path.  So, the solution of setting the color in the gradient wouldn't scale very well.</p>