क्रोम और सफारी में पारदर्शी पृष्ठभूमि के साथ एसवीजी

नमस्कार प्रिय पाठकों। आप में से जिन्होंने कभी svg प्रारूप के साथ काम किया है, वे अन्यथा जानते हैं और सबसे महत्वपूर्ण बात यह है कि यह एक बहुत पुराना बग है जो वेबकैट ब्राउज़र में ही प्रकट होता है। बग का सार यह है कि यदि आप ऑब्जेक्ट टैग के माध्यम से पारदर्शी पृष्ठभूमि के साथ एक svg छवि सम्मिलित करते हैं, तो सफारी और क्रोम इसे सफेद रंग से भर देंगे - एक उदाहरण ।



इंटरनेट पर मुझे मिला पहला समाधान जावास्क्रिप्ट का उपयोग करके एक ब्राउज़र को परिभाषित करना था, और ऑब्जेक्ट टैग को वेबकिट ब्राउज़र के लिए एक img टैग के साथ बदलने के लिए, जब से आप img के माध्यम से svg सम्मिलित करते हैं, पारदर्शी पृष्ठभूमि को सही ढंग से प्रदर्शित किया जाता है। इनलाइन-svg का उपयोग करने के लिए दूसरा समाधान नीचे आया था, लेकिन इसके लिए पेज स्वयं एक वैध एक्सएचटीएमएल दस्तावेज़ होना चाहिए, जो IE की पसंद के हिसाब से नहीं है।

संयोग से, एक तीसरा समाधान मिल गया था। इतना बुनियादी कि यह आश्चर्य की बात है कि किसी ने भी अभी तक इसकी कोशिश नहीं की है (यदि मुझे इसमें गलती है, तो कृपया मुझे बताएं)। यह <svg> टैग के बाद svg फ़ाइल में निम्न पंक्तियाँ लिखने के लिए पर्याप्त है:

< style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .

1. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   

< style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .

और फिर जादू होता है। यहाँ एक काम कर रहे उदाहरण के लिए एक कड़ी है। धन्यवाद, वह सब

Upd।

यह पता चला कि क्रोम में, कम से कम 8 वें संस्करण के साथ शुरू, बग पहले से ही तय किया गया है। सफारी अभी भी प्रासंगिक है। किसी ने सातवें क्रोम में जाँच करें।