SVG规范的XMLNS W3 URL现在在Chrome中引发错误 [英] XMLNS W3 URL for SVG spec now throwing error in Chrome
问题描述
我在filter: grayscale(100%)不起作用的浏览器中使用了此SVG蒙版进行灰度处理:
I used this SVG mask for grayscale in browsers where filter: grayscale(100%) doesn't work:
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");
不久前，这工作得很好，但是现在我在控制台中收到此错误:
A little while back, this worked perfectly fine, but now I get this error in console:
不安全尝试加载URL数据:image/svg + xml; utf8，http://www.w3.org/2000/svg'height ='0'>#从具有URL [ my domain这里].域，协议和端口必须匹配.
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.
不用说，灰度滤镜不再起作用.
Needless to say, the grayscale filter no longer works.
- 您能解释出什么问题了吗?
- 是否可以解决此问题，以便使用相同的CSS代码，不引发任何错误，并且过滤器可以工作?
- 考虑到它提到了相同的域和协议，尽管我不了解该问题，但我不知道如何实现该解决方案，但是我可以使用相同的协议将文件放在并链接到相同的域/子域中使用外部URL.
更新:
用户@Potherca评论:
User @Potherca commented:
...在Chrome 52中工作，在Chrome 53中工作...
...worked in Chrome 52, broke in Chrome 53...
这也是我的经验. SVG遮罩在当前版本的Chrome(Chrome版本53.0.2785.116)中无法使用，但在以前的版本中可以使用.它仍然可以在Firefox和Safari中使用.
This is also my experience. The SVG mask doesn't work in current version of Chrome (Chrome Version 53.0.2785.116) but it worked in previous version. It does still work in Firefox and Safari.
更新2:
我像...xmlns='http://www.w3.org/2000/svg'...一样用https进行了尝试，但是错误/错误仍然存在.
UPDATE 2:
I tried it with https like ...xmlns='http://www.w3.org/2000/svg'... but error / bug persists.
更新3: 正如用户@Potherca所建议的那样，将SVG过滤器行移至跨浏览器过滤器规则列表的顶部可消除该错误.注意:这是一种解决方法，但主要错误仍存在于Chrome/Safari/webkit中，但在此更新时，其他浏览器/工具包中没有.
UPDATE 3: As user @Potherca suggested, moving the SVG filter line to the top of the list of cross-browser filter rules eliminates the bug. NOTE: this is a workaround, but the main bug still exists in Chrome/Safari/webkit, but not in other browsers/kits at the time of this update.
推荐答案
我遇到了类似的问题.为了支持跨浏览器，在CSS中添加了几行filter行.
I had a similar issues. For cross-browser support several filter lines were added in the CSS.
这似乎是由于SVG过滤器排在最后.通过在其他过滤器行之前将其向上移动，Chrome使用了另一个filter，错误消失了.
It seemed to be caused by the SVG filter being the last in line. By moving it up before other filter lines Chrome used another filter and the error disapeared.
.gray-out {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */
}
这篇关于SVG规范的XMLNS W3 URL现在在Chrome中引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
