css – YUI压缩器正在从过滤器值中移除空格

我有一个包含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中提供了跨域问题.请建议有人有任何想法如何解决这个问题？

解决方法

我发现通过试验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,1,0'/></filter></svg>#grayscale");

这是紧凑的,不会被css压缩机改变

原文地址：https://www.jb51.cc/css/216728.html