Question

मैं एक सीएसएस इस तरह एफएफ में 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")} 

इसकी रिक्त स्थान है जो इसे एफएफ में बेकार बना देता है को हटाने।

मैं भी एक .svg फ़ाइल में ले जाकर कोशिश की, लेकिन तब यह एफएफ में क्रॉस डोमेन मुद्दों देता है। कृपया सुझाव दें कि अगर किसी को इस समस्या को ठीक करने के बारे में कोई विचार है या नहीं?

Answer 1

अपने नवीनतम संस्करण (2.4.7) पहले से ही प्रयोग करता है, तो मैं इकट्ठा होते हैं, तो यह संभावना कुछ उनके सीएसएस minifier के लिए खाते में नहीं है और आप पर http://yuilibrary.com/projects/yuicompressor/

मैं उनके साथ एक बग रिपोर्ट को बढ़ाने के लिए चाहते हैं किसी भी कॉन्फ़िगरेशन विकल्प को नहीं देख सका जो इस मामले में मदद करेगा ब्लॉक को एक लाइन पर छोटा करना, लेकिन बीच में व्हाइटस्पेस को हटा नहीं रहा है।

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

मैं कंप्रेसर (https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port) के PHP पोर्ट में इस मुद्दे पर आया, और extract_data_urls विधि में इसे एक पंक्ति में ट्रैक किया।

यह अर्क डेटा यूआरएल (जैसा कि आप उम्मीद करेंगे, यह नाम इसलिए दिया) उन्हें न्यूनतम किया जा रहा रोकने के लिए सीएसएस के शरीर से। हालांकि, यह प्रसंस्करण का एक छोटा सा करता है इससे पहले कि यह उन्हें संग्रहीत करता है:

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

यह कुछ भी नहीं के साथ खाली स्थान के वर्णों के किसी भी रन की जगह है, और इसलिए एसवीजी टैग से बाहर सभी रिक्त स्थान स्ट्रिप्स। इस लाइन को बदलकर:

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

एक एकल स्थान मौजूद करके मेरे लिए समस्या को हल किया।

PHP संस्करण जावा कंप्रेसर का एक सीधा बंदरगाह है के रूप में, मैं यह मान लेगा कि यह वही बग।

Answer 4

स्ट्रिंग का URL भाग (<svg से </svg>) को URL-encoded होना आवश्यक है। या फिर आप ;utf8 के बाद ;base64 डाल सकते हैं और यूआरएल के बजाय Base64-सांकेतिक शब्दों में बदलना।

लेकिन यह एक URL में रिक्तियों का उपयोग करने के लिए गलत है ... यही कारण है कि YUI कंप्रेसर इसे खिलवाड़ कर रहा है।

Answer 5

मुझे जेडब्लू के विचार के साथ प्रयोग करके पता चला कि आप अंतिम स्ट्रिंग को 64-एन्कोड कर सकते हैं, अंतिम #grayscale भाग को छोड़कर और इसी एन्कोडिंग भाग को जोड़कर, या यहां तक ​​कि अच्छे भी। केवल xml विशेषता और/या टैग नाम और अल्पविराम के द्वारा मैट्रिक्स मूल्यों को अलग करने के बीच रिक्त स्थान यूआरएल-सांकेतिक शब्दों में बदलना।

तो अंत में आप:

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

जो कॉम्पैक्ट है और सीएसएस कंप्रेसर