title: svg - Filter background colours apply to path
body: <p>I'm trying to replicate what I'm already doing in CSS for a class for an SVG element.</p>
  
  <p>The fill property inherits the currentColour of the parent, let's say red for arguments sake.</p>
  
  <p>I then apply a few linear gradients at different opacity values, and apply different background blend modes to each gradient.</p>
  
  <p>This works perfectly for the css class. </p>
  
  <p>Now what I've tried so far for the SVG is this:</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 class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/"&gt;
  
      &lt;!-- background-image: 
        linear-gradient(-180deg,  rgba(black,0.69) 0%,  rgba(black,0.69) 100%),
        linear-gradient(-180deg,  rgba(black,0.100) 0%,  rgba(black,0.100) 100%),
        linear-gradient(-180deg,  rgba(black,0.49) 0%,  rgba(black,0.49) 100%);
      background-blend-mode: luminosity, lighten, saturation; --&gt;
  
      &lt;defs&gt;
          &lt;filter id="f1" x="0" y="0" width="100%" height="100%"&gt;
              &lt;feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.69" result="lumiFill"/&gt;
              &lt;feBlend in="SourceGraphic" in2="lumiFill" mode="luminosity" result="lumiBlend"/&gt;
              &lt;feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.1" result="lightenFill"/&gt;
              &lt;feBlend in="lumiBlend" in2="lightenFill" mode="lighten" result="lightenBlend"/&gt;
              &lt;feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.49" result="saturationFill"/&gt;
              &lt;feBlend in="lightenBlend" in2="saturationFill" mode="saturation" result="saturationBlend"/&gt;
          &lt;/filter&gt;
      &lt;/defs&gt;
      &lt;rect width="300" height="100" filter="url(#f1)" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This does appear to change the colour, but I beleive it's stopping at the first flood as I can pull out the other two after it and it seems to work fine.</p>
  
  <p>Can anyone suggest what I might be doing wrong?</p>