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

Question

我在filter:grayscale(100%)不起作用的浏览器中使用了这个SVG掩码来表示灰度：

不久前，这工作得很好，但现在我在控制台中出现了这个错误：

不安全地尝试加载URL数据:image/svg+xml；UTF8,http://www.w3.org/2000/svg'height='0'>#Greyscale from frame[my domain here]。域、协议和端口必须匹配。

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

null

...在Chrome 52工作，在Chrome 53坏了...

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

更新2：我尝试了https，比如...xmlns='http://www.w3.org/2000/svg'...，但是错误/bug仍然存在。

Answer 1

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

这似乎是因为SVG过滤器是最后一行。通过在其他筛选器行之前将其上移，Chrome使用了另一个筛选器，错误消失了。

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