css中的内联svg过滤器

Question

After reading this question: Inline SVG in CSS (works perfectly on Firefox and Chrome)

body { background-image: 
        url("data:image/svg+xml;utf8,<svg>........</svg>");
      }

I tried to apply some filter effects with

filter: url("data:image/svg+xml;utf8,<svg>........</svg>#filter01")

It worked on FF, but didn't work on Chrome.

What's the reason and how can I fix it?

Answer 1

I don't believe you can fix it. This was only ever fully supported by Firefox and this usage will now be superseded by the *-filter property.

Answer 2

尝试在数据字符串上使用escape，就像

filter: url("data:image/svg+xml;utf8,%3Csvg%3E........%3C/svg%3E#filter01")