使用数据：编码的SVG作为CSS过滤器_Css_Firefox_Data Uri

使用数据：编码的SVG作为CSS过滤器

css firefox

使用数据：编码的SVG作为CSS过滤器,css,firefox,data-uri,Css,Firefox,Data Uri,也许有人可以在我的测试中指出一个错误，但是如果我想在CSS中将SVG过滤器编码为data:uri，以避免使用额外的文件，那么如果数据没有编码为base64，它就会失败我已经用Firefox Aurora进行了测试，其他浏览器似乎都无法识别这两种情况下的过滤器测试文件： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #filt

也许有人可以在我的测试中指出一个错误，但是如果我想在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>


#过滤器1{
过滤器：url（数据：image/svg+xml，#去饱和）；
}
#过滤器2{
过滤器：url（数据：image/svg+xml；base64，phn2zyb4bwxucz0iahr0cdovl3dy53my5vcmcvmjawmc9zdmcipjxmawx0zxigawq9imrlc2f0dxjjguipjxmzunvbg9ytwf0cml4ihr5cgu9inhdhvyyyxrlib2ywx1zxm9ijailz48l2zpbhrlcj48l3n2zz4%3D#去饱和）；
}
按原样应用过滤器
此项编码为base64

现场演示

url（）的内容在两种情况下都是相同的：

<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>

编码为

如您所见，第一个保持红色，但在第二种情况下应用svg过滤器，文本变为灰色

我是不是忘了第一个案子

在中，我找不到任何关于编码的信息，所以我想这应该是可能的（当然，使用更简单的文本编码比使用base64“加密”要好得多）

谢谢

经过更多的尝试和错误，我发现在数据上使用escape是可行的，现在我们只需要等待其他浏览器实现对它的支持

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

#filterBase64 {
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate);
}

#filterEscape {
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
}

</style>
</head>
<body>
<p style="color:red" id=filterBase64>This one is encoded as base64</p>
<p style="color:red" id=filterEscape>Filter encoded with "escape()"</p>
<p style="color:red" id=filterScript>This one is applied with javascript</p>
<script>
document.getElementById("filterScript").style.filter="url(data:image/svg+xml," + escape('<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>') + "#desaturate)";
</script>
</body>
</html>


#过滤器底座64{
过滤器：url（数据：image/svg+xml；base64，phn2zyb4bwxucz0iahr0cdovl3dy53my5vcmcvmjawmc9zdmcipjxmawx0zxigawq9imrlc2f0dxjjguipjxmzunvbg9ytwf0cml4ihr5cgu9inhdhvyyyxrlib2ywx1zxm9ijailz48l2zpbhrlcj48l3n2zz4%3D#去饱和）；
}
#过滤景观{
筛选器：url（数据：image/svg+xml、%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3C%3C颜色矩阵%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate）；
}
此项编码为base64
用“escape（）编码的过滤器
此脚本与javascript一起应用
document.getElementById（“filterScript”）.style.filter=“url（数据：image/svg+xml，”+escape（“”）+“#去饱和）”；

我知道这是老东西，但chrome确实支持类似的东西，IE也支持使用各种过滤语法：。FF需要一个文件路径，Chrome可以支持新的过滤器属性，也就是旧的：）这里有更多好的信息：有人注意到这不再起作用了吗<代码>背景图像：url（数据…工作正常，但将相同的

数据…

放入

过滤器：url（数据…

中，会出现

不安全的加载url…

错误。