inline svg filter in css

问题

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?

回答1:

try to use escape on the data string , like

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

回答2:

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.

来源：https://stackoverflow.com/questions/13925736/inline-svg-filter-in-css