I'm using Figma editor and I tried to blur element, in the editor everything looks fine, then I export it into SVG. I see that there are tags that should make my element blur <feGaussianBlur in="BackgroundImage" stdDeviation="16"/> But it doesn't work, look in the href.
Dunno why it doesn't work. I also can not find information about it is there HTML reason or the browser.
I don't use Figma, but browser support for masks can be a bit flaky. I don't think it has much to do with the blur effect as far as I can tell. I think it's probably the mask settings that are the problem.
Anyhoo, I tested this and it seems to work. I use Inkscape which also seems to create problems with masks in browsers. A small manual edit to the SVG is required to get the mask to work properly.
Look for maskUnits="userSpaceOnUse"
Change it to maskUnits="objectBoundingBox"
Here's a working example SVG - tested in Firefox, Chrome and Microsoft Edge. I only needed to make the above edit to get it to work. However, you might need to make more edits. I see a couple instances of "userSpaceOnUse" in your code.
I found this information here: https://lab.iamvdo.me/css-svg-masks/
If this doesn't work for you, maybe consider doing it in Inkscape instead (which is free), at least that way you know it will work with just one little edit.
