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壓縮機