css - SVG 规范的 XMLNS W3 URL 现在在 Chrome 中抛出错误

Question

我在 filter: grayscale(100%) 的浏览器中使用此 SVG 蒙版进行灰度处理不起作用:

filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

不久前，这工作得很好，但现在我在控制台中收到此错误:

Unsafe attempt to load URL data:image/svg+xml;utf8,http://www.w3.org/2000/svg' height='0'>#greyscale from frame with URL [my domain here]. Domains, protocols and ports must match.

不用说，灰度滤镜不再起作用了。

1. 你能解释一下哪里出了问题吗？
2. 是否可以修复此问题以便使用相同的 CSS 代码、不抛出错误并且过滤器正常工作？
3. 考虑到它提到了相同的域和协议(protocol)，虽然我不知道如何实现解决方案，因为我不明白这个问题，但我能够使用相同的协议(protocol)将文件放置和链接到相同的域/子域，而不是使用外部 URL。

更新:

用户@Potherca 评论道:

...worked in Chrome 52, broke in Chrome 53...

这也是我的经验。 SVG 掩码在当前版本的 Chrome(Chrome 版本 53.0.2785.116)中不起作用，但在以前的版本中有效。它在 Firefox 和 Safari 中仍然有效。

更新 2:我用 https 试过了喜欢...xmlns='http://www.w3.org/2000/svg'...但错误/错误仍然存​​在。

更新 3:正如用户@Potherca 所建议的那样，将 SVG 过滤器行移动到跨浏览器过滤器规则列表的顶部可以消除该错误。注意:这是一种解决方法，但主要错误仍然存​​在于 Chrome/Safari/webkit 中，但在本次更新时不存在于其他浏览器/工具包中。

Answer 1

我遇到了类似的问题。为了支持跨浏览器，在 CSS 中添加了几行 filter。

这似乎是由于 SVG 滤镜排在最后导致的。通过将其向上移动到其他过滤器行之前，Chrome 使用了另一个 filter 并且错误消失了。

.gray-out {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */
}