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")

它在Firefox上运行正常，但在Chrome上无法工作。

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

- Erik

---

你需要对SVG应用过滤器吗？只需在SVG内定义和使用过滤器，这在大多数浏览器中都可以正常工作。 - Erik Dahlström

@Erik Dahlström 我知道最好嵌入一个内联SVG元素或使用外部的.svg文件。但我只想知道CSS能否做到这一点。 - Erik

请尝试使用 https://yoksel.github.io/url-encoder/ 进行编码。 - Akin Zeman

Answer 1

尝试在数据字符串中使用转义，例如：

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

- dswwsd

Answer 2

我不相信你能修复它。这只有Firefox完全支持，而且现在这种用法将被 *-filter 属性取代。

- Michael Mullany