也许有人能指出我的测试中的错误,但是看起来如果我想在CSS中使用SVG滤镜并将其编码为data: uri
以避免使用其他文件,那么如果数据没有被编码为base64,则会失败。
我已经在Firefox Aurora上进行了测试,其他浏览器似乎都无法识别这个滤镜。
测试文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#filter1 {
filter:url(data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"><filter id%3D"desaturate"><feColorMatrix type%3D"saturate" values%3D"0"%2F><%2Ffilter><%2Fsvg>#desaturate);
}
#filter2 {
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate);
}
</style>
</head>
<body>
<p style="color:red" id=filter1>Filter applied "as is"</p>
<p style="color:red" id=filter2>This one is encoded as base64</p>
</body>
</html>
在http://martinezdelizarrondo.com/bugs/svgfilter.html上有实时演示。
无论是哪种情况,url()的内容都是相同的:
<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>
使用http://software.hixie.ch/utilities/cgi/data/data编码。
正如您所看到的,第一个保持为红色,但在第二种情况下应用了SVG滤镜并且文本变成了灰色。
我在第一种情况下忘记了什么吗?
在此错误中,我没有找到有关编码的任何信息,因此我认为这应该是可能的(而且明显使用更简单的文本编码比使用base64“加密”更好)。
谢谢
background-image: url(data...)
可以正常工作,但是将相同的data...
放入filter: url(data...)
中,就会出现Unsafe attempt to load URL...
错误。 - rojobuffalo