दिलचस्प पोस्ट
क्या सभी Android आधारित फ़ोन और टेबलेट के लिए स्क्रीन रिज़ॉल्यूशन की कोई सूची है? एंड्रॉइड ब्राउजर / क्रोम से कस्टम एंड्रॉइड एप्लिकेशन लॉन्च करना अहस्ताक्षरित (size_t) प्रकारों के लिए एक ध्वज मूल्य के रूप में -1 का उपयोग करना दशमलव प्रकार के लिए घोषणा प्रत्यय जावा स्टेटिक बनाम इंस्टेंस जेएस / सीएसएस से सिस्टम डीपीआई / पीपीआई का पता लगा रहा है? Symfony2 AJAX लॉगिन उद्धरण चिह्नों के साथ आस-पास सूची गतिशील जोड़ें आइटम दिखाएं रूटर v4 पर कई रास्तों को रेफर करता है Xcode 6.xx में अनुपयोगी उपकरण खंड दिखाई दिया मैं अपने जीवीएम के लिए डिफ़ॉल्ट लोकेल कैसे सेट करूं? स्रोत कोड में एथ के लिए उपयोग किए जाने वाले पासवर्ड को संभालना चेक करें कि क्या कुकी सक्षम हैं मैं आईओएस में उपयोगकर्ता से वर्तमान स्थान कैसे प्राप्त करूं?

एसवीजी एनीमेशन IE11 पर काम नहीं कर रहा है

मेरे पास वास्तव में सरल लोडिंग एनीमेशन है जो फ़ायरफ़ॉक्स और क्रोम पर पूरी तरह से काम करता है, लेकिन IE11 में यह एसवीजी आंकड़ा नहीं दिखा रहा है।

यहां पूर्ण उदाहरण है: जेएसएफडल नमूना

एसवीजी:

<svg class="circular-loader" viewBox="25 25 50 50"> <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> 

एनीमेशन, जो एक रोटेशन है, IE11 पर काम कर रहा है, लेकिन एसवीजी जो एक सर्कल है, प्रदर्शित नहीं की जा रही है।

कोई उपाय?

मुझे अभी पता नहीं है कि आईई 11 द्वारा क्या समर्थन नहीं किया जा रहा है

वेब के समाधान से एकत्रित समाधान "एसवीजी एनीमेशन IE11 पर काम नहीं कर रहा है"

केवल माइक्रोसॉफ्ट एज एसवीजी सीएसएस बदलाव और एनीमेशन का समर्थन करेगा .. विशेषकर stroke-dasharray

कृपया Microsoft डेवलपर डॉक्स देखें:

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

सीएसएस संक्रमण और एनिमेशन को एसवीजी तत्वों पर लागू करने की अनुमति देता है।
अप्रभावी संस्करण: माइक्रोसॉफ्ट एज बिल्ड 10240+

जैसा कि आप अपने उदाहरण के अपने कांटा में देख सकते हैं। आप अपने circle तत्व पर stroke विशेषता नहीं होने के कारण लोडर स्पिन नहीं देख रहे थे

https://jsfiddle.net/z8w4vuau/50/

आप देख सकते हैं कि यह अब स्पिन कैसे कर सकता है। लेकिन आपको यह पता stroke-dasharray होगा कि ब्राउज़र IE है या नहीं और अपना stroke-dasharray समायोजित करें ताकि यह बड़ा डैश हो। चूंकि IE11 और नीचे stroke-dasharray एनीमेशन या ट्रांज़िशन के साथ stroke-dasharray और stroke-dashoffset समर्थन नहीं करते हैं, जब तक कि यह माइक्रोसॉफ्ट एज 10240+ का निर्माण न करें।

लेकिन अगर आपको एसवीजी को चेतन करने के लिए एक क्रॉस ब्राउज़र समाधान की आवश्यकता है, विशेष रूप से stroke-dasharray और stroke-dashoffset । फिर एक जेएस एनीमेशन लाइब्रेरी का प्रयोग करें जैसे कि ग्रीनसॉक एनीमेशन प्लेटफॉर्म ( जीएसएपी )। ड्रॉएसवीजीपीलॉगिन का उपयोग करना

https://greensock.com/drawSVG

IE एसवीजी तत्वों के सीएसएस एनीमेशन का समर्थन नहीं करता। यह मानक निर्मित एसएमआईएल एनिमेशन का समर्थन नहीं करता है जो एसवीजी के पास है।

यदि आप अपने एनीमेशन को मूल एसवीजी एनिमेशन में कनवर्ट करते हैं, तो शायद आप इसे फ़ैकेस्मिथ लाइब्रेरी का उपयोग कर काम कर सकते हैं। अन्यथा आपको IE के लिए कुछ वैकल्पिक फ़ॉलबैक का उपयोग करना होगा – जैसे कि एनिमेटेड जीआईएफ या कुछ और

किसी के लिए इस के साथ परेशानी है, मेरे पास एक वैकल्पिक हल है I

मेरे पास आईडी और सीएसएस एनिमेशन के साथ एक पूर्ण एसवीजी था, सभी अन्य प्रमुख ब्राउज़रों के लिए बिल्कुल सही काम करना।

मेरे पास एसवीजी एचटीएमएल में डाला गया है, इसलिए मैं सीएसएस एनिमेशन के साथ हर आइटम का उपयोग कर सकता हूं।

इसके लिए काम करने के लिए, आपको अपना एसवीजी स्थिति के साथ रखना होगा:

 absolute; top: 0px; left: 0px, 

… एक कंटेनर के अंदर .svgcontent (या जो भी आप इसे कॉल करना चाहते हैं)

स्क्रिप्ट:

 var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false; objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ]; if ( IE ){ objs.forEach(function (item) { item = $(item); id = item.attr('id'); svgcontent = item.closest('.svgcontent') svg = item.closest('svg'); svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' ' html = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>'; item.remove(); $(svgcontent).prepend(html); }); } 

यह objs सरणी में सभी तत्वों को लेता है, और उन्हें पहले एक के पीछे एक पूर्ण एसवीजी के रूप में डालें (आप इस व्यवहार को बदलने के लिए append करने के लिए पूर्व में बदल सकते हैं)।

और एसवीजी को एक ही आईडी वस्तु के रूप में होने वाला है, इसलिए सीएसएस एटम एक पूर्ण एसवीजी पर लागू होने वाला है, एसवीजी ऑब्जेक्ट नहीं है।

और बस!