css中的内联svg过滤器

Question

阅读完这个问题：Inline SVG in CSS（在Firefox和Chrome上完美运行）

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

我尝试使用

应用一些滤镜效果

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

它适用于FF，但无法在Chrome上运行。

原因是什么？我该如何解决？

Answer 1

我不相信你能解决它。这只是Firefox完全支持，现在这个用法将被* -filter属性取代。

Answer 2

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

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