YUI 压缩机正在从过滤器值中删除空格

我有一个包含过滤器的 css，用于在 FF 中添加灰度图像，如下所示：-

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 中毫无用处。

我还尝试将其移动到 .svg 文件，但随后它在 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,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");

它很紧凑并且不会被 css 压缩器改变