1

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.

cp

JSFiddle

Dunno why it doesn't work. I also can not find information about it is there HTML reason or the browser.

0

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.

1
  • 1
    It seems to work but is not that simple to export svg and use it in browser. I will try to use another editor. Thank you – Adriano Dec 22 '20 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.