I am trying to implement a design in an Angular/Ionic app. It includes a card-like element, which is a slightly transparent complex shape, that blurs the background behind it. The problem I face is that backdrop-filter property either doesn't work at all, or blurs the entire SVG container, as shown:

The transparent section is made out of 4 SVGs I made in SVGator, each containing a single ellipse or rectangle element.
I'm not sure if I should post the entire template, since it includes Angular bindings in it and would be useless if copy/pasted, but here is the template structure and the last SVG, which is hardcoded:

<div class="wrapper">
  <svg>
    <ellipse />
  </svg>
  <svg>
    <rect />
  </svg>
  <svg>
    <rect />
  </svg>
  <svg>
    <ellipse />
  </svg>
</div>

<svg id="bottom_circle" width="125" height="50" viewBox="0 0 125 50">
    <ellipse
      rx="71.27852"
      ry="79.973999"
      transform="matrix(.876842 0 0 0.781504 62.5-12.5)"
      fill="rgba(255, 255, 255, 0.8)"
    />
  </svg>

Do you have any ideas on how to contain the filter within the visible part of the SVGs?