👲🏾 🤵🏻 🍔 ब्राउज़रों में SVG बटन का उपयोग करने में समस्या 😵 🧘 📔

यह लेख लेख की एक निरंतरता है हम एसवीजी में एक बटन खींचते हैं , जिसमें वेब पृष्ठों पर बटन के रूप में उपयोग किए जाने वाले एसवीजी चित्र बनाने की समस्याओं को संबोधित किया गया है। यहां मैं सीधे HTML कोड में छवियों के क्रियान्वयन के लिए जाऊंगा और आपको बताऊंगा कि डेवलपर की क्या समस्याएं हैं, इन समस्याओं को कैसे हल किया जा सकता है और उन समस्याओं का क्या करना है जिन्हें हल नहीं किया जा सकता है।

बस के मामले में (उन लोगों के लिए जिन्होंने पहला लेख नहीं पढ़ा है), मैं दोहराता हूं कि कई समस्याओं का समाधान नहीं हुआ है, और अंत में मुझे एसवीजी का उपयोग करने के विचार को छोड़ने के लिए मजबूर होना पड़ा। इसलिए यदि आप एक लेख पढ़ने में समय नहीं बिताना चाहते हैं जो वास्तव में उपयोग किए जाने वाले परिणाम की ओर नहीं ले जाता है, तो आप इसे छोड़ सकते हैं। जो लोग, इसके बावजूद, विवरण और बारीकियों में रुचि रखते हैं, मैं एक बिल्ली के लिए पूछता हूं।

पेज पर बटन डालें

HTML पेज में SVG इमेज जोड़ने के पाँच तरीके हैं:

<ऑब्जेक्ट> टैग ;
<iframe> टैग ;
<एम्बेड> टैग ;
<img> टैग ;
सीएसएस शैली पृष्ठभूमि ।

इंटरनेट के माध्यम से एसवीजी के बारे में जानकारी की तलाश में, मैं एक पृष्ठ पर आया जहां इन सभी तरीकों को विभिन्न ब्राउज़रों में अपने काम का परीक्षण करने के लिए एक साथ रखा गया है। मैंने ओपेरा 10.63 और 11.00, फ़ायरफ़ॉक्स 3.6.13, क्रोम 8.0.552.224 में परीक्षण किया। मैंने इस सूची में IE को शामिल नहीं किया, क्योंकि एसवीजी का नवीनतम स्थिर संस्करण समर्थित नहीं है। मैंने पहले अन्य ब्राउज़रों से निपटने की योजना बनाई, और अगर सबकुछ ठीक हो गया, तो IE में एसवीजी समर्थन के लिए एक अतिरिक्त प्लग-इन स्थापित करें और इसके व्यवहार की जांच करें, साथ ही वर्तमान में विकसित किए जा रहे नौवें संस्करण के साथ खेलें। लेकिन यह ऐसा नहीं हुआ, क्योंकि (जैसा कि पहले ही उल्लेख किया गया है), यहां तक कि आधिकारिक तौर पर एसवीजी का समर्थन करने वाले ब्राउज़रों के साथ भी, कई समस्याएं सामने आईं। अब अतिरिक्त समय की जाँच करने के लिए IE को सिर्फ लेख में परिणाम शामिल करने के लिए, मैं इसे तर्कहीन मानता हूं। मैं इस ब्राउज़र के प्रशंसकों से माफी मांगता हूं, अगर वे पाठकों के बीच पाए जाते हैं। साथ ही अन्य ब्राउज़रों के प्रशंसक जो मेरी सूची में दिखाई नहीं दिए।

इसलिए, सत्यापन के परिणामस्वरूप, निम्नलिखित चित्र प्राप्त किया गया था:

<ऑब्जेक्ट> , <iframe> , <एम्बेड> टैग सभी परीक्षण किए गए ब्राउज़रों द्वारा समर्थित हैं।
<Img> टैग ने FF में काम करने से इनकार कर दिया, जबकि क्रोम और ओपेरा में यह विशेष रूप से पिक्चर मोड में काम करता है: एम्बेडेड स्क्रिप्ट और इवेंट संसाधित नहीं होते हैं।
CSS पृष्ठभूमि शैली सबसे बहुमुखी निकली:
- फ़ायरफ़ॉक्स में यह बिल्कुल भी समर्थित नहीं है;
- यह क्रोम में सही ढंग से प्रदर्शित होता है, लेकिन, जैसा कि <img> में , इवेंट और स्क्रिप्ट प्रोसेसिंग समर्थित नहीं है, और इसके अलावा, एनीमेशन भी काम नहीं करता है;
- ओपेरा में वह काम करता है, तो नहीं; ऐसा लगता है कि पेज कोड में समान एसवीजी छवि के साथ <img> टैग होने पर भी शैली काम नहीं करती है, और यह टैग पृष्ठभूमि छवि के साथ तत्व से पहले स्थित होना चाहिए। अन्य सभी मामलों में, पृष्ठभूमि सही ढंग से काम करती है, लेकिन, क्रोम में, यह एक स्थिर चित्र में प्रदर्शित किया जाता है, बिना घटनाओं, स्क्रिप्ट और एनिमेशन के। (वैसे, पिछले लेख में टिप्पणियों में इस कार्यक्षमता के बारे में स्पष्टीकरण के लिए हाथापाई Xpeh और दसियों के लिए धन्यवाद।)

यह पता चला है कि फ़ायरफ़ॉक्स हमारे सभी रास्पबेरी को खराब कर देता है। हमारे उद्देश्यों के लिए, एसवीजी में घटनाओं की न तो एम्बेडेड स्क्रिप्ट और न ही आंतरिक प्रसंस्करण की आवश्यकता है: आपको जो कुछ भी चाहिए वह HTML फ़ाइल में ही किया जा सकता है (इसके अलावा, कुछ पहलुओं में यह बहुत अधिक सुविधाजनक होगा), इसलिए तस्वीर को केवल एक टैग के साथ प्रदर्शित किया जा सकता है <img> लेकिन अफसोस, आपको <ऑब्जेक्ट> , <iframe> और <एम्बेड> के बीच चयन करना होगा। उनके बीच कोई महत्वपूर्ण अंतर नहीं है, लेकिन एम्बेड टैग को HTML 4.0 और XHTML 1.0 मानकों से बाहर रखा गया है, और iframe टैग सख्त विशिष्टताओं के साथ असंगत है। इसलिए, सबसे सार्वभौमिक के रूप में संस्करण वस्तु पर बने रहना सबसे अच्छा है।

ऑब्जेक्ट इंसर्ट कोड कुछ इस तरह दिखता है:

<object data="./button.svg" type="image/svg+xml" style="width: 7em; height: 1.5em;"></object>

किसी भी HTML कोड को टैग के अंदर दर्ज किया जा सकता है: इसका उपयोग उन ब्राउज़रों पर किया जाएगा जो SVG का समर्थन नहीं करते हैं। खैर, यह हमारे लिए उपयोगी होगा, क्योंकि जितनी जल्दी या बाद में हमें आईई के बारे में याद रखना होगा (और एसवीजी के बिना अन्य ब्राउज़र भी मिल सकते हैं)। उनके लिए, हम टैग के अंदर सामान्य <इनपुट प्रकार = "बटन"> जोड़ सकते हैं।

पाठ लेबल का संशोधन

इसलिए, हमने अपना बटन डाला। हम एक दूसरा जोड़ने जा रहे हैं ... और फिर हम समझते हैं कि इसके लिए हमें एक नई एसवीजी फ़ाइल बनानी होगी, क्योंकि शिलालेख एसवीजी कोड के अंदर संग्रहीत होता है। लेकिन मैं छवि फ़ाइलों की संख्या को कम करना चाहूंगा, क्योंकि विशेष रूप से यह इस उद्देश्य के लिए था कि वेक्टर के उपयोग की कल्पना की गई थी! कैसे हो? यहां कई रास्ते संभव हैं।

1. HTML के साथ बटन ओवरले करें।

मुझे तुरंत कहना होगा कि मैंने इस पद्धति की विस्तार से जांच नहीं की, लेकिन मैं अंदर से महसूस कर सकता हूं कि यह बहुत सारी समस्याएं लाएगा। ऐसी समस्याओं का एक विशिष्ट समाधान यह है कि बटन के बाद टेक्स्ट को पोजिशन किया जाए और इसे सीएसएस का उपयोग करके बाईं ओर स्थानांतरित किया जाए। लेकिन मुझे यकीन नहीं है कि इस तरह से पाठ को बटन पर सही ढंग से केन्द्रित करना संभव होगा। इसलिए - स्थिति समायोजन के साथ जेएस, फिर - पृष्ठ पर वस्तुओं की स्थिति की लगातार निगरानी करना (उदाहरण के लिए, जब विंडो को आकार देना या गतिशील रूप से ब्लॉक दिखाना / छिपाना) ... और यह भी ध्यान देने योग्य है कि बटन का डिज़ाइन प्रसंस्करण पर क्लिक करते समय इस पाठ को नीचे-दाईं ओर शिफ्ट कर सकता है। (त्रि-आयामी के प्रभाव के लिए) ... सामान्य तौर पर, बस इस सब के बारे में सोचने से मुझे बेचैनी होती है, इसलिए मैंने अन्य तरीकों से देखना शुरू किया।

2. एसवीजी में टेक्स्ट डालें।

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

3. एक टैग से पाठ खींचना।

<ऑब्जेक्ट> टैग में एक स्टैंडबाय विशेषता होती है जिसमें ऑब्जेक्ट की सामग्री के बजाय ब्राउज़र द्वारा प्रदर्शित पाठ होता है जबकि यह ऑब्जेक्ट लोड हो रहा है। यह पता चला कि एसवीजी बटन इस विशेषता के मूल्य को अच्छी तरह से प्राप्त कर सकता है और इसका उपयोग शिलालेख को अपने आप संशोधित करने के लिए कर सकता है। और यह पता चला है कि एक झपट्टा में हम दो पक्षियों को एक पत्थर से मारते हैं: एक तरफ, किसी भी चिपके हुए लोड के मामले में हमारे पास एक सुरक्षा जाल है - उपयोगकर्ता खाली जगह नहीं देखेगा, लेकिन एक सार्थक पाठ (मैं, हालांकि, इस तरह के व्यवहार को भड़काने में विफल रहा); दूसरी ओर, टेक्स्ट लेबल को अब <input> टैग में क्लासिक मान के रूप में आसानी से और नेत्रहीन रूप से लागू किया जाता है।

प्रसंस्करण पर क्लिक करें

अगली समस्या यह है कि हम <ऑब्जेक्ट> टैग पर माउस क्लिक हैंडलर को नहीं लटका सकते: एसवीजी ऑब्जेक्ट पर क्लिक भेजा जाता है और वहाँ संसाधित किया जाता है। स्वाभाविक रूप से, हम बटन के अंदर ईवेंट प्रोसेसिंग को चला सकते हैं, लेकिन यह अनुचित है: कई बटन हैं, और केवल एक एसवीजी फ़ाइल है। इसके बजाय, प्रसंस्करण को पैरेंट पेज से स्क्रिप्ट में सौंपना बेहतर है। यहां, फिर से, कार्यान्वयन के विकल्प भिन्न हो सकते हैं, मैं निम्नलिखित पर बस गया: पुस्तकालय जेएस-फ़ाइल में मैंने फ़ंक्शन doClickAction को परिभाषित किया, जो एक विशेष बटन के हैंडलर को कॉल करता है, और "बटन" स्क्रिप्ट से मैं इस फ़ंक्शन को कॉल करता हूं, इसे बटन के पहचानकर्ता को पास करता है। नमूना कोड इस प्रकार है।

HTML पेज कोड:

 <object id="my-button1" data="./button.svg" standby="My Button1" type="image/svg+xml"> <input type="button" id="my-button1-ie" value="My Button1" onclick="javascript:doClickAction(parentNode.name);" /> </object> <object id="my-button2" data="./button.svg" standby="My Button2" type="image/svg+xml"> <input type="button" id="my-button2-ie" value="My Button2" onclick="javascript:doClickAction(parentNode.name);" /> </object> <script type="text/javascript"> // <![CDATA[ var signal_handlers = new Object(); function registerSvgAction(signal_id, handler) { signal_handlers[signal_id] = handler; } function doClickAction(signal_id) { if (signal_handlers[signal_id]) signal_handlers[signal_id](); else alert('Internal error: unknown SVG signal (' + signal_id + ')!<br />' + 'Please contact the developers.'); } registerSvgAction('my-button1', function () { alert('First button clicked!'); }); registerSvgAction('my-button2', function () { alert('Second button clicked!'); }); // ]]> </script>

एसवीजी बटन कोड:

 <svg version="1.1" onload="init()" onclick="doAction()"> <script type="text/ecmascript"> // <![CDATA[ function init() { // btnLabel  btnLabelShadow -  <text>     var btnLabel = document.getElementById('btnLabel'); var btnLabelShadow = document.getElementById('btnLabelShadow'); var newText = document.createTextNode(frameElement.standby); btnLabel.appendChild(newText); btnLabelShadow.appendChild(newText.cloneNode(true)); } function doAction() { parent.doClickAction(name); } // ]]> </script>

इस कोड में, मैंने गैर-एसवीजी ब्राउज़रों में बटन प्रदर्शित करने के लिए अतिरिक्त <input> टैग डाले, और उनके लिए एक ही doClickAction को कॉल असाइन किया, जो इसे पेरेंट ऑब्जेक्ट के पहचानकर्ता (यानी, समान) में पास करता है। कि हैंडलर SVG से गुजरेगा)। इस एकरूपता को देखते हुए, कोई भी एक स्क्रिप्ट द्वारा इन बटनों के सम्मिलन को स्वचालित करने का प्रयास कर सकता है, लेकिन IE में वस्तुओं की सामग्री तक पहुंच बस अवरुद्ध है। हालांकि, यदि आप एक स्क्रिप्टेड मार्ग बनाते हैं, तो घोंसले से परेशान होने के बिना सभी वस्तुओं को तुरंत बटन से बदलना आसान है।

एक गैर-स्पष्ट पहलू को ध्यान में रखना भी आवश्यक है: वास्तविकता में, हालांकि स्क्रिप्ट मूल पृष्ठ के फ़ंक्शन को कॉल करती है, एसवीजी फ़ाइल के पते को वर्तमान पता माना जाएगा। नतीजतन, सभी रिश्तेदार पते उस निर्देशिका से गिने जाएंगे जहां बटन फ़ाइल स्थित है, और वास्तविक वर्तमान पृष्ठ पते से नहीं। इस बिंदु को ध्यान में रखना होगा, उदाहरण के लिए, जब window.open () के माध्यम से नई खिड़कियां खोलते हैं। समाधान पूर्ण पते का उपयोग करने या पहले किसी चर में वर्तमान पते को संग्रहीत करने के लिए हो सकता है और फिर एक नए पते की गणना करने के लिए इसका उपयोग कर सकता है।

फ़ॉन्ट आकार

इस बार, मैंने ध्यान से बटन पर पाठ लेबल के लिए फ़ॉन्ट आकार के सवाल को टाल दिया। लेकिन अब इस कार्य से निपटने का समय आ गया है। आप क्या प्राप्त करना चाहेंगे? आदर्श रूप से, फ़ॉन्ट मुख्य पृष्ठ पर समान है। दुर्भाग्य से, एक सामान्य समाधान यहां नहीं मिला। जाहिरा तौर पर, यह प्रत्येक मामले में अधिक सही होगा कि बटन लेबल की शैली किस हद तक बदल सकती है, और इसके आधार पर, कम से कम समय लेने वाली कार्यान्वयन पथ चुनें। उदाहरण के लिए, मेरी परियोजना में फ़ॉन्ट हर जगह समान है। तदनुसार, मैंने एसवीजी में फ़ॉन्ट-परिवार की संपत्ति को सीधे पंजीकृत किया है, और मैं बटन की वास्तविक ऊंचाई (जो मुझे मूल पृष्ठ के तत्व तक पहुंचकर मिलती है) द्वारा पाठ को स्केल करते हुए, आरंभीकरण फ़ंक्शन में आकार की गणना करता है। अधिक जटिल मामलों में, शिलालेख, मोटाई, या फ़ॉन्ट के प्रकार को बदलना आवश्यक हो सकता है। ऐसी स्थितियों के लिए, आप उपयोग कर सकते हैं, उदाहरण के लिए, शैली को <ऑब्जेक्ट> टैग पर टांगना और फिर इसे init () SVG फ़ंक्शन के अंदर खींचना, प्राप्त तत्वों को पाठ तत्व में पार्स करना और असाइन करना। इसके अलावा, विकल्प HTML कोड में एक वैश्विक हैंडलर हो सकता है, जो पेज लोड करने के बाद सभी बटनों के माध्यम से चलता है, उनमें से प्रत्येक के लिए किसी प्रकार का "ट्यूनिंग फ़ंक्शन" कहा जाता है। मैं दोहराता हूं, यहां कोई भी सार्वभौमिक सिफारिश देने में सक्षम होने के लिए सब कुछ बहुत अलग है।

दुर्भाग्य से, इस तरह के एक सरल समाधान में भी, मेरे पहले विकल्प के रूप में, परेशानियां थीं। अर्थात्: यदि बटन शुरू में छिपा हुआ है, तो फ़ायरफ़ॉक्स अपने आकार के रूप में शून्य देता है, और फ़ॉन्ट आकार की गणना नहीं की जा सकती है। मैं अभी तक इस समस्या का सही समाधान नहीं कर पाया हूं, सभी विकल्प बहुत बदसूरत और / या अक्षम दिखते हैं। बटन दिखाने की घटना को पकड़ पाना संभव नहीं था, क्योंकि यह बस मौजूद नहीं है। पहले से छिपे हुए ब्लॉक को दिखाते हुए बटन को फिर से संगठित करने के रूप में एक स्पष्ट उपांग बनाना संभव है, लेकिन ऐसे कई स्थान हो सकते हैं, और यह आसानी से भुलाया जा सकता है। आप पृष्ठ पर वर्तमान फ़ॉन्ट सेटिंग्स की गणना करने और बटन में प्राप्त आकार का उपयोग करने की कोशिश कर सकते हैं।

अन्य समस्याएं

जैसा कि आप देख सकते हैं, एसवीजी के साथ काम करने की सादगी के बारे में बात करना आवश्यक नहीं है। लेकिन, जाहिर है, यह पर्याप्त नहीं था, और उपरोक्त सभी समस्याओं के बाद, नए भी चढ़ गए। उन्हें किसी भी श्रेणी में तोड़ना मुश्किल है, इसलिए मैं केवल उन सभी चीजों को सूचीबद्ध करता हूं, जिन्हें चलाने के लिए मैं "भाग्यशाली" हूं।

ओपेरा: प्रमुख आधारभूत पाठ शैली फ़ॉन्ट आधार को बदलने के लिए काम नहीं करती है। परिणामस्वरूप, पाठ को लंबवत रूप से संरेखित करना असंभव हो जाता है, स्थिति को समायोजित करना आवश्यक है, या बटन और फ़ॉन्ट के आकार के आधार पर इसे गतिशील रूप से समायोजित करना है, ताकि पाठ लेबल सभ्य दिखे।
क्रोम: पेज स्केलिंग का उपयोग करते समय, एसवीजी तत्वों को स्केल किया जाता है, लेकिन उनके लिए चुने गए क्षेत्रों के आकार नहीं होते हैं। नतीजतन, बटन क्षेत्रों की सीमाओं से बाहर रेंगते हैं और क्रॉप किए जाते हैं, और यहां तक कि स्क्रॉलबार भी दिखाई देते हैं, जो छवि के एक बड़े हिस्से को कवर करते हैं। एसवीजी - स्केलेबिलिटी का मुख्य लाभ - बस कचरा में फेंक दिया जाता है!
ओपेरा: कैश से छवियों का पुन: उपयोग करते समय सक्रिय रूप से छोटी गाड़ी। विशेष रूप से, यदि आप लिंक का अनुसरण करते हैं और फिर पिछले पृष्ठ पर लौटने के लिए ओपेरा में बैक बटन पर क्लिक करते हैं, तो सभी एसवीजी चित्र प्रदर्शित नहीं होते हैं, लेकिन आंतरिक एसवीजी आरंभीकरण स्क्रिप्ट में "हैंग" करते हैं। इसके अलावा, कभी-कभी ऐसी समस्याएं होती हैं जब गतिशील रूप से createElement के माध्यम से SVG बटन बनाते हैं : यदि आप पृष्ठ पर मौजूद छवि का उपयोग करते हैं, तो यह पृष्ठ लोडिंग को निलंबित करता है और तब तक प्रकट नहीं होता है जब तक आप Esc दबाते हैं (और उसके बाद, विभिन्न अप्रिय प्रभाव समय-समय पर देखे जाते हैं)।
सामान्य समस्या: ऊपर वर्णित समाधान में फ़ॉन्ट आकार निश्चित हो जाता है और जब पृष्ठ को छोटा किया जाता है तो बदल नहीं जाता है, बटन और लेबल आकार अब एक दूसरे के अनुरूप नहीं होते हैं। तदनुसार, ज़ूम करने के बाद, पृष्ठ को पुनः लोड किया जाना चाहिए ताकि बटन सही फ़ॉन्ट आकार के साथ फिर से संगठित हो जाएं। मैं यह नहीं छोड़ता कि मैंने इसे इकाइयों के साथ सही नहीं किया है, लेकिन मैं इस समस्या को हल नहीं कर सकता। शायद समायोजन को कुछ वैश्विक जावास्क्रिप्ट-हैंडलर द्वारा कार्यान्वित किया जा सकता है, किसी तरह पैमाने की निगरानी और बटन के मजबूर अपडेट का कारण बन सकता है।
फ़ायरफ़ॉक्स: फ़ॉन्ट आकार के साथ "टेक्स्ट ओनली" जूम मोड में कुछ भयानक हो रहा है। मुझे तुरंत समझ में नहीं आ रहा है कि इस मोड में तत्वों के आकार क्या नियम जारी किए गए हैं, और मुझे इस समस्या पर बात करने की बात नहीं दिख रही है।
IE: जैसा कि कहा गया था, एसवीजी इसमें समर्थित नहीं है, और चित्रों के बजाय, सामान्य बटन जो मैंने <ऑब्जेक्ट> टैग के अंदर डाले हैं, प्रदर्शित किए जाते हैं। समस्या यह है कि यह IE को बहुत कसकर आता है कि यह एसवीजी के साथ काम करने का तरीका नहीं जानता है। इसलिए, एक बटन से मिलने के बाद, वह एक खाली ब्लॉक प्रदर्शित करता है, थोड़ी देर के लिए सोचता है, फिर एक ब्लॉक के बजाय एक बटन खींचता है। फिर दूसरे बटन के साथ एक ही बात, तीसरे के साथ ... सामान्य तौर पर, इसमें छह बटन खींचने में एक सेकंड और डेढ़ से दो लगते हैं।

परिणाम

सूखे अवशेषों में क्या रहता है? "ठीक है, मैं नहीं कर सकता, मैं नहीं कर सकता!" मैंने अपने लिए निष्कर्ष निकाला कि वर्तमान अवसंरचना अभी भी एसवीजी के बड़े पैमाने पर कार्यान्वयन के लिए तैयार नहीं है (मैं अनैच्छिक सजा के लिए माफी चाहता हूं)। उपरोक्त सभी के साथ बट्टिंग (और, संभवतः, न केवल उनके साथ) समस्याओं, त्रुटियों, खामियों - यह सब बहुत समय और प्रयास लेता है, इस तथ्य के बावजूद कि वर्तमान कार्यान्वयन की सीमाएं भी फायदे का पूरा लाभ उठाने की अनुमति नहीं देती हैं एसवीजी का उपयोग करना होगा।

खैर, एक नकारात्मक परिणाम भी एक परिणाम है। शायद, भविष्य में कभी-कभी, जब एसवीजी समर्थन में सुधार होता है, तो यह अनुभव स्कैलेबल ग्राफिक्स के लिए अंतिम संक्रमण के लिए मेरे लिए उपयोगी होगा। इस बीच, मैं इसे बेहतर समय तक शेल्फ पर रखूंगा।

आशा है कि लेख उपयोगी था। वह अविकसित समाधानों के उपयोग को समय पर हतोत्साहित करके किसी को समय और तंत्रिकाओं को बचाने में मदद करेगा। और कोई, शायद, इसके विपरीत, ब्राउज़र के हताश प्रतिरोध को दूर करने के लिए आगे के वीर प्रयासों को प्रोत्साहित करेगा।

फिर मैं अपनी छुट्टी लेता हूं और आपके ध्यान के लिए धन्यवाद करता हूं।

UPD: सूची में IE में विलंबित रेंडरिंग समस्या को जोड़ा गया।

UPD2: मैंने ब्राउज़र को एक स्थान पर भ्रमित किया, निश्चित किया।

ब्राउज़रों में SVG बटन का उपयोग करने में समस्या