Question

我有一个包含滤波器，用于在FF加入灰朦相似图片的CSS： -

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 */ 

当我使用锐压缩机它删除所有过滤器值，并且变得之间的空间像这样： -

.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

我如果您使用的是最新的版本（2.4.7）已经收集，则很可能是他们的事CSS minifier不占，你会想在http://yuilibrary.com/projects/yuicompressor/

我提出和他们的bug报告看不到任何配置选项，这将有助于在这种情况下，例如将块缩小到一行，但不能删除两者之间的空白。

Answer 2

您可以feColorMatrix值之间添加逗号：

<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\'/> 

但是，这并不与固定之间的空间的问题： SVG的xmlns

很想了解那一个了。

Answer 3

我在压缩机的PHP端口（https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port）中遇到了这个问题，并将其跟踪到extract_data_urls方法中的一行。

这将从css的主体中提取数据url（正如你所期望的，给定它的名字）以防止它们被缩小。但是，它处理的一点点它存储在他们面前：

$token = preg_replace('/\s+/', '', $token); 

这取代的空白字符什么也没有任何运行，所以去掉所有的空间了SVG标签。将此行更改为：

$token = preg_replace('/\s+/', ' ', $token); 

通过留下单个空格来解决此问题。

由于PHP版本是Java压缩器的直接端口，我会假定这个错误。

Answer 4

该字符串的URL部分（从<svg到</svg>）需要进行URL编码。或者，您可以在;utf8之后放置;base64，而将Base64编码为URL。

但是，在URL中使用空格是不正确的...这就是为什么YUI压缩器会搞砸它。

Answer 5

我通过JW的实验发现，你可以对整个字符串进行64位编码，除了最后的#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压缩机