YUI Compressor正在从过滤器值中删除空格

Question

我有一个包含过滤器的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中无用的空间.

我也尝试将其移动到.svg文件,但随后它在FF中提供跨域问题.请建议是否有人知道如何解决这个问题？

Answer 1

我通过试验JW.发现你可以对整个字符串进行base64编码,除了最后#grayscale一部分并添加相应的编码部分,或者甚至更好.只对urml编码xml属性和/或标记名称之间的空格,并用逗号分隔矩阵值.

所以最后你有:

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压缩机改变

Answer 2

我认为如果您已经使用最新版本（2.4.7），那么这可能是他们的 CSS 压缩器没有考虑到的问题，您将需要在http://yuilibrary.com/projects/上向他们提出错误报告yui压缩器/

我看不到任何在这种情况下有帮助的配置选项，例如将块缩小到一行，但不删除之间的空白。