एसवीजी स्टैक्स

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

मैं इस समस्या को कैसे ठीक कर सकता हूं? ठीक है, सभी स्प्राइट्स को एक-दूसरे के ऊपर रखें , उनकी दृश्यता को बंद करें, फिर केवल एक ही दिखाएं जो आपको चाहिए। काश यह संभव होता ... और लंबे समय से मैं चाहता था ... और फिर यह हुआ (नीचे से ऊपर तक पढ़ें):



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

तो SVG स्टैक कैसे काम करता है ? वास्तव में, बहुत सरल है। एरिक के एसवीजी फ़ाइल के स्रोत कोड पर एक नज़र डालें।



सबसे पहले, हम अपने प्रत्येक आइकन को एसवीजी फ़ाइल में एक अद्वितीय आईडी देते हैं , लेकिन एक ही वर्ग , फिर हम CSS कोड जोड़ते हैं जो सभी आइकन छुपाता है , लेकिन परिणाम के रूप में चयनित एक दिखाता है : लक्ष्य । और अब हम आईडी को SVG फ़ाइल में स्थानांतरित करने के लिए URL में "पृष्ठभूमि: url (icon.svg # ID )" जैसे एंकर भाग का उपयोग कर सकते हैं ।

इस तकनीक को विकसित करने के लिए @erikdahlstrom को बहुत धन्यवाद।