用于SVG规范的XMLNS W3 URL现在在Chrome中引发错误

Question

我在浏览器中使用此SVG掩码进行灰度级filter: grayscale(100%)操作:

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

不久前,这个工作非常好,但现在我在控制台中出现了这个错误:

加载URL数据的不安全尝试:image/svg + xml; utf8,http://www.w3.org/2000/svg'height ='0'>来自带有URL [ 我的域名 ]的帧的#greecale .域,协议和端口必须匹配.

不用说,灰度滤波器不再起作用.

1. 你能解释一下出了什么问题吗？
2. 这可以修复,以便使用相同的CSS代码,不会抛出任何错误,并且过滤器有效吗？
3. 考虑到它提到相同的域和协议,虽然我不知道如何实现解决方案,因为我不明白这个问题,我能够使用相同的协议将文件放在同一个域/子域上,而不是使用外部URL.

更新:

用户@Potherca评论说:

...在Chrome 52中工作,在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

我有类似的问题.对于跨浏览器支持filter,CSS中添加了几行.

这似乎是由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 */
}