YUI Compressor jest usunięcie spacji z filtrem wartości

Question

mam css zawierający filtr do dodawania zdjęć Grayout w FF tak: -

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 */ 

Gdy używam YUI kompresor usuwa wszystkie przestrzenie między wartościami filtrów i staje w ten sposób: -

.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")} 

Usuwa przestrzenie, co czyni je bezużytecznymi w FF.

Próbowałem również przenieść go do pliku .svg, ale następnie daje problemy z domeną w FF. Proszę zasugerować, jeśli ktoś ma jakiś pomysł, w jaki sposób mogę rozwiązać ten problem?

Answer 1

wnoszę jeśli korzystasz z najnowszej wersji (2.4.7) już, to jest prawdopodobne, coś ich CSS minifier nie uwzględnia i chcesz podnieść raport o błędzie z nimi w http://yuilibrary.com/projects/yuicompressor/

I nie widzę żadnej opcji konfiguracji, która mogłaby pomóc w tym przypadku, np zminimalizowanie bloków w jednym wierszu, ale nie usunięcie białych spacji.

Answer 2

Możesz dodać przecinki między wartościami 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\'/> 

ale to nie rozwiąże problemu z przestrzeni między: svg xmlns

chcielibyśmy zrozumieć, że jeden zbyt.

Answer 3

Natrafiłem na ten problem w porcie PHP kompresora (https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port) i śledziłem go do linii w metodzie extract_data_urls.

Wyodrębnia adresy URL danych (jak można się było spodziewać po nazwie) z treści css, aby zapobiec ich minimalizacji. Jednak to robi trochę przetworzenia przed przechowuje je:

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

Zastępuje dowolną serię białych znaków z niczego, a więc pozbawia wszystkie spacje z tagiem SVG. Zmiana tej linii na:

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

naprawiła problem, zostawiając pojedynczą prezentację.

Ponieważ wersja PHP jest bezpośrednim portem kompresora Java, zakładam, że ten sam błąd.

Answer 4

Część adresu URL (od <svg do </svg>) musi być zakodowana za pomocą adresu URL. Lub możesz umieścić ;base64 po ;utf8 i zamiast tego zakodować kod Base64.

Ale niepoprawne jest używanie spacji w adresie URL ... właśnie dlatego kompresor YUI zepsuł to.

Answer 5

Dowiedziałem się, eksperymentując z pomysłem JW., Że można kodować cały kod na 64, z wyjątkiem ostatniej części #grayscale i dodając odpowiednią część kodującą, lub jeszcze ładniej. tylko kodowanie adresów URL między znakami xml i/lub nazwami znaczników oraz rozdzielanie wartości macierzy za pomocą przecinków.

Więc w końcu masz:

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"); 

która jest zwarta i nie zostanie zmieniony przez sprężarkę css