css - CSS中的内联svg过滤器

Question

阅读此问题后：CSS 中的内联 SVG（在 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

尝试对数据字符串使用转义，例如

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

Answer 2

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