इस उत्तर की तारीख के रूप में पोस्ट किए गए स्वच्छ, तेज और आसान समाधान असंतोषजनक हैं। वे त्रुटिपूर्ण बयान पर निर्मित हैं कि एसवीजी दस्तावेजों में जेड ऑर्डर की कमी है। पुस्तकालय भी आवश्यक नहीं हैं। कोड की एक पंक्ति वस्तुओं के समूह या वस्तुओं के समूह के क्रम में हेरफेर करने के लिए अधिकांश संचालन कर सकती है जो कि एक ऐप के विकास में आवश्यक हो सकते हैं जो एक xyz अंतरिक्ष में 2 डी वस्तुओं को चारों ओर ले जाते हैं।
जेड ऑर्डर एसवीजी दस्तावेज़ फ़्रैगमेंट्स में निश्चित रूप से मौजूद है
एसवीजी दस्तावेज़ टुकड़ा क्या कहा जाता है आधार नोड प्रकार SVGElement से व्युत्पन्न तत्वों का एक पेड़ है। एसवीजी दस्तावेज़ टुकड़े का रूट नोड एक SVGSVGElement है, जो HTML5 <svg> टैग से मेल खाता है । SVGGElement <g> टैग से मेल खाता है और बच्चों को एकत्रित करने की अनुमति देता है।
एसवीजीएल पर जेड-इंडेक्स विशेषता के रूप में सीएसएस में एसवीजी रेंडरिंग मॉडल को पराजित किया जाएगा। W3C SVG अनुशंसा v1.1 2 संस्करण के अनुभाग 3.3 और 3.4 में कहा गया है कि SVG दस्तावेज़ के टुकड़े (एक SVGSVGElement से संतान के पेड़) का उपयोग करके प्रस्तुत किया जाता है जिसे पेड़ की गहराई से पहली खोज कहा जाता है । यह योजना अवधि के प्रत्येक अर्थ में az क्रम है।
Z ऑर्डर वास्तव में रे ट्रेसिंग की जटिलताओं और कंप्यूटिंग मांगों के साथ 3 डी रेंडरिंग की आवश्यकता से बचने के लिए एक कंप्यूटर विज़न शॉर्टकट है। एसवीजी दस्तावेज़ टुकड़े में तत्वों के निहित z- सूचकांक के लिए रैखिक समीकरण।
z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty
यह महत्वपूर्ण है क्योंकि यदि आप एक सर्कल को ऊपर ले जाना चाहते हैं जो इसके ऊपर एक वर्ग से नीचे था, तो आप बस सर्कल से पहले वर्ग डालें। यह जावास्क्रिप्ट में आसानी से किया जा सकता है।
सहायक विधियाँ
एसवीइग्लिमेंट इंस्टेंसेस में दो तरीके होते हैं जो सरल और आसान जेड ऑर्डर हेरफेर का समर्थन करते हैं।
- parent.removeChild (बच्चे)
- parent.insertBefore (बच्चा, चाइल्ड रीफ)
सही उत्तर जो मेस नहीं बनाता है
क्योंकि SVGGElement ( <g> टैग) को केवल SVGCircleElement या किसी अन्य आकृति की तरह ही आसानी से हटाया और डाला जा सकता है, Adobe उत्पादों और अन्य ग्राफिक्स टूल्स की विशिष्ट छवि परतों को SVGGElement का उपयोग करके आसानी से लागू किया जा सकता है। यह जावास्क्रिप्ट अनिवार्य रूप से एक चाल नीचे कमान है।
parent.insertBefore(parent.removeChild(gRobot), gDoorway)
अगर SVGGElement gRobot के बच्चों के रूप में SVGGElement gRobot के बच्चों के रूप में खींची गई एक रोबोट की परत एसवीजीग्लमेंट gDoorway के बच्चों के रूप में खींची गई थी, तो रोबोट अब दरवाजे के पीछे है क्योंकि द्वार का z ऑर्डर अब रोबोट के एक से अधिक z क्रम है।
एक चाल ऊपर कमान लगभग आसान है।
parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())
इसे याद करने के लिए बस a = a और b = b सोचें।
insert after = move above
insert before = move below
डोम को राज्य के साथ दृश्य में छोड़ना
यह उत्तर सही होने का कारण यह है क्योंकि यह न्यूनतम और पूर्ण है और एडोब उत्पादों या अन्य अच्छी तरह से डिज़ाइन किए गए ग्राफिक्स संपादकों के आंतरिक की तरह, एक राज्य में आंतरिक प्रतिनिधित्व छोड़ देता है जो प्रतिपादन द्वारा बनाए गए दृश्य के अनुरूप है।
वैकल्पिक लेकिन सीमित दृष्टिकोण
आमतौर पर इस्तेमाल किया जाने वाला एक और तरीका है मल्टीपल एसवीजी डॉक्यूमेंट फ्रैगमेंट (एसवीजी टैग) के साथ सीएसएस जेड-इंडेक्स का इस्तेमाल करना, जिसमें ज्यादातर पारदर्शी बैकग्राउंड होते हैं लेकिन सबसे नीचे। फिर, यह SVG रेंडरिंग मॉडल की लालित्य को हरा देता है, जिससे z ऑर्डर में ऑब्जेक्ट्स को ऊपर या नीचे ले जाना मुश्किल हो जाता है।
टिप्पणियाँ:
- ( https://www.w3.org/TR/SVG/render.html v 1.1, द्वितीय संस्करण, 16 अगस्त 2011)
3.3 एसवीजी दस्तावेज़ टुकड़े में आदेश देने वाले तत्वों में एक अंतर्निहित ड्राइंग ऑर्डर होता है, एसवीजी दस्तावेज़ टुकड़े में पहले तत्वों के साथ पहले "पेंट" किया जाता है। बाद के तत्वों को पहले से चित्रित तत्वों के ऊपर चित्रित किया गया है।
3.4 समूह को कैसे प्रदान किया जाता है समूह तत्व जैसे कि 'g' तत्व (कंटेनर तत्व देखें) में पारदर्शी काले रंग के लिए एक अस्थायी अलग कैनवास के उत्पादन का प्रभाव होता है, जिस पर बाल तत्व चित्रित होते हैं। समूह के पूरा होने पर, समूह के लिए निर्दिष्ट कोई भी फ़िल्टर प्रभाव एक संशोधित अस्थायी कैनवास बनाने के लिए लागू किया जाता है। संशोधित अस्थायी कैनवास को समूह में किसी भी समूह-स्तरीय मास्किंग और अस्पष्टता सेटिंग्स को ध्यान में रखते हुए, पृष्ठभूमि में संकलित किया गया है।
