सीएसएस-एनिमेटेड एसवीजी

Question

के लिए ब्राउज़र समर्थन का पता लगाएं मैं CSS -निमेटेड SVG तत्वों के साथ खेल रहा हूं और समस्या का सामना कर रहा हूं कि भले ही सभी तकनीकों का उपयोग किया जाता है, कुछ ब्राउज़रों द्वारा समर्थित किया जाता है, यानी CSS -निमित DIV के काम लेकिन SVG तत्व नहीं हैं। मैं सोच रहा हूं कि क्या यह पता लगाने का कोई तरीका है कि कोई ब्राउज़र तत्वों को CSS का उपयोग कर एनिमेट करने में सक्षम है या नहीं। उदाहरण के साथ

Here is a jsFiddle। यह क्रोम, फ़ायरफ़ॉक्स और सफारी के नवीनतम संस्करणों में काम करता है। लेकिन इसे खोलने पर उदा। फ़ायरफ़ॉक्स 5 केवल div घुमाता है जबकि rect नहीं करता है।

Answer 1

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

//fallback animation here 

@media (-webkit-min-device-pixel-ratio: 0) { 
    // webkit animation here 
} 

फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए? मुझे नहीं पता कि सीएसएस में ऐसा कैसे किया जाए, लेकिन मुझे यकीन नहीं है कि फ़ायरफ़ॉक्स के कुछ संस्करणों से अधिक वापस जा रहा है या क्रोम एक आम उपयोग केस है।

Answer 2

मेरा मानना ​​है कि आधुनिकता में एसएमआईएल एनीमेशन डिटेक्शन इसे करना चाहिए। https://modernizr.com/download?smil-setclasses

मैं इसे सीएसएस/एसवीजी चार्ट एनिमेशन के एक सुंदर शामिल सेट में उपयोग कर रहा हूं। बस निम्नलिखित टैग में एक fallback लपेट:

.no-smil{ } 

http://codepen.io/msbtterswrth/pen/greWzy

Answer 3

मैं सोच रहा हूँ अगर वहाँ अगर एक ब्राउज़र सीएसएस

का उपयोग कर animating एसवीजी तत्वों में सक्षम है का पता लगाने के लिए एक रास्ता है

सरल उत्तर: हां आप @jhpratt द्वारा बताए गए अनुसार कर सकते हैं।

आप यह पता लगा सकते हैं कि ब्राउज़र केवल सीएसएस के साथ सीएसएस-कार्यक्षमता का समर्थन करता है या नहीं। @supports सीएसएस एट-नियम आपको घोषणाओं को निर्दिष्ट करने देता है जो एक या अधिक विशिष्ट सीएसएस सुविधाओं के लिए ब्राउज़र के समर्थन पर निर्भर करते हैं। इसे फीचर क्वेरी कहा जाता है।

उदाहरण:

@supports (display: flex) { 
    div { 
    display: flex; 
    } 
} 
@supports not (display: flex) { 
    div { 
    float: right; 
    } 
} 

MDN लिंक: https://developer.mozilla.org/de/docs/Web/CSS/@supports

लांग उत्तर:

तुम हमेशा कुछ cross-browser मुद्दों होगा। आपके सामने आने वाली समस्या हर वेब डेवलपर को परेशान कर रही है। अभी भी इस ब्राउज़र-समर्थन-समस्या के साथ घूमने के तरीके हैं:

1।आप देख सकते हैं संगतता के लिए "मैं उपयोग कर सकते हैं":

लिंक: http://caniuse.com/ यह जो एनिमेशन की तरह संदिग्ध है किसी भी कार्यक्षमता को देखने के लिए सुझाव देते हैं।

2. अपने कार्यप्रवाह में एक autoprefixer:

आप -moz-, -webkit- की तरह एक उपसर्ग के साथ सीएसएस का उपयोग कर के बारे में समय के सबसे अधिक चिंता करने की ज़रूरत नहीं है एक autoprefixer की मदद से

, आदि। यह छोटा सहायक आपके लिए चाल करेगा, आप कुछ ऑटोप्रिफ़िक्सर भी बता सकते हैं जिन्हें आप समर्थन करना चाहते हैं।

3. उपयोगकर्ता 3 - पार्टी पुस्तकालयों:

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

कुछ बड़े नाम:

• कोणीय: https://angularjs.org/ (एनजी-चेतन उपयोग)
• JQuery: https://jquery.com/
• Greensock: https://greensock.com/

वहाँ कई और अधिक कर रहे हैं, सिर्फ दुनिया खोज वाइड वेब।

4. उपयोग सीएसएस हैक्स विशिष्ट ब्राउज़र पता लगाने के लिए:

यह सीएसएस-हैक्स तथाकथित उपयोग करना संभव है। वे विशिष्ट सीएसएस कॉल हैं, जो केवल कुछ ब्राउज़रों पर लागू होते हैं।

कुछ उदाहरण:

Internet Explorer/Edge 8 only: @media \0screen {} 

firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {} 

Opera ≤ 9.27 AND Safari 2: html:first-child .selector {} 

आप यहाँ और अधिक Browserhacks देख सकते हैं: http://browserhacks.com/

निष्कर्ष:

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

उम्मीद है कि इससे मदद मिलती है। सादर

Answer 4

आप एक एनिमेशन की पुनरावृत्ति के पूरा होने के लिए जाँच करने के लिए एक घटना श्रोता जोड़ सकते हैं, और इसी ईवेंट हैंडलर भीतर supportsSVGKeyFramedAnimatedProps = true की तरह एक ध्वज सेट (यदि यात्रा कभी नहीं तो पूरा करता है यह एनिमेट नहीं है)।

elem.addEventListener('animationiteration', eventHandler, false)

यह आप के बजाय एक fallback उपलब्ध कराने के अपने एसवीजी एनिमेशन के लिए 'आगे गिर' के लिए, की अनुमति होगी।