दिलचस्प पोस्ट
नोडजे स्थापित नहीं किया जा सकता है: / usr / bin / env: नोड: ऐसा कोई फ़ाइल या निर्देशिका नहीं है जब आप encodeuri / encodeurcomponent के बजाय भागने का उपयोग करना चाहते हैं? जीआईटी को सूचीबद्ध करना और हटाने से कोई शाखा नहीं है (झूठ?) छवि पर क्यूबिक और कैटमुल स्प्लिने का प्रभाव अंक एल्गोरिथम के बीच सबसे छोटी दूरी फ़ोल्डर नहीं प्राप्त कर सकते हैं कि मैं सिर्फ गूगल ड्राइव पर बनाया है गुणों के लिए __noSuchMethod__ सुविधा के बराबर है, या इसे जेएस में लागू करने का एक तरीका है? समय बीत गया (उद्देश्य-सी) सभी Android प्रसारण आशय सूची कहां है क्यों एमवीवीएम और इसका मुख्य लाभ क्या है? डेटा को निकालने के बिना ggplot2 अक्षों की सीमा (सीमा के बाहर): ज़ूम कैसे RecyclerView के साथ अंतहीन सूची को लागू करने के लिए? कैसे एक स्ट्रिंग को एक चार सरणी वापस परिवर्तित करने के लिए? ActiveRecord: आकार बनाम गिनती आगे c ++ में एक एन्यूम घोषित कर रहा है

एसवीजी एनीमेशन 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 करने के लिए पूर्व में बदल सकते हैं)।

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

और बस!