पृष्ठभूमि पुनरारंभ करें एसवीजी एनीमेशन

Question

मेरे पास एक तत्व की पृष्ठभूमि छवि के रूप में एक एसवीजी सेट है। पहली बार तत्व प्रदर्शित होता है, एनीमेशन सही ढंग से खेलता है।

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

यहाँ एक (मेरा नहीं) इस बात का डेमो है: http://www.luigifab.info/public/svg-smil/test.html

कुछ जुड़े Firefox और Chrome के लिए ब्राउज़र कीड़े रिपोर्ट नहीं है, लेकिन इसके बाद के संस्करण के रूप में मैं इस कार्यक्षमता का इरादा है लगता है।

क्या मेरे एसवीजी एनीमेशन को छवि प्रदर्शित होने पर रीसेट/रीप्ले करने का कोई तरीका है?

मैं आदर्श रूप से केवल सीएसएस और एसवीजी का उपयोग कर समाधान ढूंढ रहा हूं - अन्यथा जावास्क्रिप्ट के साथ एक समाधान यदि यह संभव नहीं है।

Answer 1

ब्राउज़र रीलोड को मजबूर करने के लिए छवि URL को बदलने की संभावना है।

Answer 2

मुझे लगता है कि आपका अनुमान "... जैसा कि छवि को ब्राउज़र द्वारा पुनः लोड नहीं किया गया है - यह स्मृति संस्करण में उपयोग करता है जो पहले से ही एनिमेटिंग कर रहा है" सही है, क्योंकि एसवीजी फ़ाइल कैश की गई है! तो बिना (असली) 'रीलोड' के बिना एनीमेशन ट्रिगर नहीं किया जाता है (दोबारा)।

ठीक है, सबसे पहले चलो एसवीजी एनिमेशन देखें। एनीमेशन तत्व के अंदर उपयोग किए जाने वाले दो गुण हैं जिनका उपयोग एनीमेशन को दोहराने के लिए किया जाता है - Repeating Animations और The ‘animate’ element देखें। आपके मामले में एनीमेशन केवल एक बार चलता है (कोई पुनरावृत्ति नहीं)।

तो आपको किसी भी तरह से एनीमेशन "ट्रिगर" करने के लिए जावास्क्रिप्ट की आवश्यकता होगी।
सिद्धांत में यह संभव है (उदाहरण: Advanced SVG Animation Techniques), लेकिन केवल अगर एसवीजी फ़ाइल डोम का हिस्सा है, जिसे आप जावास्क्रिप्ट के माध्यम से एक्सेस कर सकते हैं। इसके लिए आपको एसवीजी फ़ाइल को <object> के रूप में शामिल करना होगा।

जैसे ही आप <img> टैग में या एक सीएसएस background-image में एक एसवीजी फ़ाइल का उपयोग करते हैं, आपके पास फ़ाइल में कोई स्क्रिप्ट एक्सेस नहीं है। (How (and how not) to Control Caches देखें)

तो एक ही रास्ता मैं अपने लक्ष्य को प्राप्त करने के बारे में सोच सकता है एसवीजी फ़ाइल संचित करने से ब्राउज़र को रोकने के लिए है, या एक <object> तत्व में एसवीजी फ़ाइल का उपयोग करने के लिए इतना है कि आप जावास्क्रिप्ट के जरिए एनीमेशन नियंत्रित कर सकते हैं ।

बीटीडब्ल्यू: लुइफिफाब का जवाब इतना बुरा नहीं है। फ़ाइल/छवि के पुनः लोड करने के लिए यह अक्सर इस्तेमाल किया जाने वाला "चाल" होता है - The Cache Trick

Answer 3

लुइगीफाब के उत्तर के लिए कार्यान्वयन देखें। यूआरएल पैरामीटर के अंत में कुछ random things डालें, इससे ब्राउज़र को यह सोचने के लिए मजबूर किया जाएगा कि संसाधन एक "नया संसाधन" है। Demo

Answer 4

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

url + "&" + Math.random()

निरंतर यूआरएल के साथ कोई पुनः लोड डेमो: http://jsfiddle.net/4ZBLr/8/

यादृच्छिक यूआरएल src साथ पुनः लोड डेमो: http://jsfiddle.net/4ZBLr/9/

Answer 5

रूप @netsurfer कहा, मैं एक object का उपयोग करके इस समस्या का समाधान ।

<object type="image/svg+xml" data="my.svg"></object> 

हर बार जब मैं गतिशील एसवीजी object एनीमेशन शुरू से ही शुरू होता है इंजेक्षन: यहाँ एक उदाहरण है।

Answer 6

मुझे लगता है कि कई परिदृश्यों में setCurrentTime(0) सबसे अच्छा समाधान है - यदि ब्राउज़र द्वारा समर्थित है। यहाँ (यह मानते हुए आप, एम्बेड करने के लिए <object> टैग का उपयोग निश्चित रूप से) एक उदाहरण है:

let content = document.getElementById("object-id").contentDocument; 
let svg = content.getElementsByTagName("svg")[0]; 
if(svg.getCurrentTime() > 10) 
    svg.setCurrentTime(0); 

अधिक प्रासंगिक API बारे में infos यहां पाया जा सकता: https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement