title: CSS backdrop-filter on SVG elements
body: <p>I am trying to add a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" rel="nofollow noreferrer">backdrop filter</a> to a SVG <code>&lt;rect&gt;</code> which lies on top of another SVG <code>&lt;rect&gt;</code>.</p>
  
  <p>However, the CSS properties <code>backdrop-filter: blur(10px)</code> and <code>-webkit-backdrop-filter: blur(10px)</code> do not seem to have any effect on SVG elements. When I do the same for two <code>&lt;div&gt;</code> it works.</p>
  
  <p>How can I achieve the same effect for the two <code>&lt;rect&gt;</code>? </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-css lang-css prettyprint-override"><code>body, html {
    margin: 0;
  }
  
  .outerrect {
    position: absolute;
    left: 0px;
    top: 120px;
  }
  
  .innerrect {
    position: absolute;
    
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  
  .outerdiv {
    position: absolute;
    left: 0px;
    top: 120px;
    width: 200px;
    height: 100px;
    background-color: red;
  }
  
  .innerdiv {
    position: absolute;
    left: 140px;
    top: 20px;
    width: 120px;
    height: 60px;
    border: 1px solid;
    
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;rect class="outerrect" fill="red" x="0" y="0" width="200" height="100"&gt;&lt;/rect&gt;
    &lt;rect class="innerrect" x="140" y="20" width="120" height="60"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  &lt;div class="outerdiv"&gt;
    &lt;div class="innerdiv"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>