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

字符串的网址部分（从<svg到</svg>）需要进行网址编码。或者，您可以在;base64之后添加;utf8并对网址进行Base64编码。

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

Answer 3

如果您已经使用最新版本（2.4.7），我会收集，那么这可能是他们的CSS缩小器没有考虑的内容，您将需要在http://yuilibrary.com/projects/yuicompressor/

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

Answer 4

您可以在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 5

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

这会从css的主体中提取数据网址（正如您所期望的那样），以防止它们被缩小。但是，它在存储之前会进行一些处理：

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

这将替换任何空白字符的运行，因此从SVG标记中删除所有空格。将此行更改为：

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

通过留下一个空格来解决我的问题。

由于PHP版本是Java压缩器的直接端口，我会假设同样的错误。

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

5 个答案: