16

我有一个包含 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 中给出了跨域问题。请建议是否有人对如何解决此问题有任何想法？

4

5 回答 5

8

通过试验 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 压缩器改变

于 2013-07-18T18:56:01.267 回答
1

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

但是在 URL 中使用空格是不正确的……这就是 YUI 压缩器搞砸的原因。

于 2013-03-16T20:00:03.510 回答
0

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

也很想了解那个。

于 2013-01-21T16:00:15.593 回答
0

我在压缩器的 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 压缩器的直接端口，我会假设同样的错误。

于 2013-01-30T14:20:24.237 回答
0

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

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

于 2012-12-20T02:05:48.893 回答