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

我使用过滤器：灰度(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.

不用说,灰度过滤器不再有效.

你可以解释出了什么问题吗？
>这可以修复,以便使用相同的CSS代码,没有错误被抛出,并且过滤器工作？
>考虑到它提到了相同的域和协议,虽然我不知道如何实现解决方案,因为我不明白的问题,我可以放置和链接文件在相同的域/子域与相同的协议,而不是使用外部网址

更新：

User @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’…但错误/ bug仍然存在.

更新3：
根据用户@Potherca建议,将SVG过滤器线移动到跨浏览器过滤规则列表的顶部消除了错误.注意：这是一种解决方法,但Chrome / Safari / webkit中仍然存在主要错误,但在此更新时,其他浏览器/工具包中并不存在.

解决方法

我也有类似的问题.对于跨浏览器支持,CSS中添加了多个过滤器行.

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

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

解决方法

猜你在找的CSS相关文章