CSS filter: url(file.svg#filter-id) not working properly?

[hashfiputra]

Summary

I'm not sure if it's Next.js related issue or not.

Have CSS something like this:

      .element {
        filter: url("../public/file.svg#filter-cta");
      }

The filter will not show up, because when I inspect, the compiled CSS is this:

      .element {
        filter: url(../media/file.xxxx.svg);
      }

As you can see the ID is missing.

Additional information

next: 15.2.1

Example

No response

[SidKH]

When you specify relative URLs, Next processes it, that's why you see this:

.element {
  filter: url(../media/file.xxxx.svg);
}

Since you have your svg in public folder, you can simply use the absolute path

.element {
  filter: url("/file.svg#filter-cta");
}

However, the relative path should still work, so the fact that you don't see the filter indicates that there are some problems with SVG itself.

Make sure that your SVG looks similar to this:

<svg xmlns="http://www.w3.org/2000/svg" width="230" height="120">
  <filter id="element-id">
    <feDropShadow dx="4" dy="8" stdDeviation="4"/>
  </filter>
</svg>

And that you target correct id in your css

.element {
  filter: url("/file.svg#element-id");
}

[hashfiputra]

I'll mark this answer for now, I'm using different approach, but will try again sometime later to check