YUI Compressor正在从过滤器值中删除空格 [英] YUI Compressor is removing spaces from filter values

问题描述

我有一个css包含过滤器在FF中添加Grayout图像像这样： -

I have a css containing filter for adding Grayout images in FF like this:-

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压缩器时，在过滤器值之间，它变成这样： -

When I use YUI compressor it removes all the spaces between filter values and it becomes like this:-

.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中无用。

Its removing the spaces which makes it useless in FF.

我也尝试移动到一个.svg文件，但它提供了跨域问题在FF。请建议如果有人对如何解决这个问题有任何想法？

I also tried moving it to an .svg file but then it gives cross domain issues in FF. Please suggest if anyone has any idea on how can I fix this problem?

推荐答案

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

I found out by experimenting with JW.'s idea that you can base64-encode the entire string, except for the final #grayscale part and adding the corresponding encoding part, or, even nicer. only url-encode the spaces between xml attributes and/or tag names and separating the matrix values by commas.

所以最后你有：

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

which is compact and doesn't get altered by the css compressor

这篇关于YUI Compressor正在从过滤器值中删除空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！