我有一个包含CSS的过滤器,用于在FF中添加Grayout图像,如下所示：
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#grayscale"); /* Firefox 10+,Firefox on Android */
当我使用YUI压缩器,它会删除过滤器值之间的所有空格,它变成如下：
.desaturate{filter:url("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='grayscale'><feColorMatrixtype='matrix'values='0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010'/></filter></svg>#grayscale")}
它去除在FF中无用的空间.
解决方法
我发现通过试验JW的想法,你可以base64编码整个字符串,除了最后的#grayscale部分,并添加相应的编码部分,甚至更好.只能对xml属性和/或标签名称之间的空格进行url编码,并用逗号分隔矩阵值.
所以最终你有：
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333,0.3333,1,0'/></filter></svg>#grayscale");
这是紧凑的,不会被css压缩机改变
