SVG z-index काम नहीं कर रहा? पाथ की परतों का क्रम ठीक करें

CSS z-index बढ़ाने पर भी SVG पाथ दूसरी आकृति के पीछे रहे तो SVG में तत्वों का क्रम जाँचें। सामान्य SVG आरेखन क्रम में पहले वाली आकृति पहले रंगी जाती है और बाद की आकृतियाँ उसे ढकती हैं। पाथ सामने लाने के लिए उसे उन आकृतियों के बाद रखें जिन्हें उसे ढकना है। SVG रेंडरिंग मॉडल यह क्रम परिभाषित करता है।

पहले तय करें कि ओवरलैप कहाँ है। पूरा SVG पेज हेडर के पीछे हो तो वह HTML लेआउट समस्या है; एक SVG के अंदर दो आकृतियों का ओवरलैप चित्र क्रम की समस्या है। नीचे का सुधार दूसरे मामले के लिए है।

एक प्रतीक पर अंतर देखें

हमने नारंगी तारे, नीली डिस्क और हरे रिबन वाला मूल तीन-भाग प्रतीक बनाया। बाएँ पैनल में तारा SVG में पहले है और उस पर CSS position: relative तथा z-index: 999 है। ब्राउज़र उस z-index मान की गणना करता है, लेकिन बाद की डिस्क और रिबन तारे को अब भी ढकते हैं। दाएँ पैनल में केवल तत्व क्रम बदलता है: वही तारा आखिरी है और सामने दिखता है।

परीक्षण में HeadlessChrome 141 और 1200 × 680 स्क्रीनशॉट इस्तेमाल हुआ। उसने चाइल्ड तत्वों का क्रम बाईं ओर तारा, डिस्क, रिबन और दाईं ओर डिस्क, रिबन, तारा बताया। यह सामान्य ओवरलैप वाले SVG चाइल्ड तत्वों का सीमित परीक्षण है, हर रेंडरर, नेस्टेड समूह या प्रभाव का वादा नहीं।

SVG फ़ाइल में क्रम ठीक करें

SVG स्रोत कोड को टेक्स्ट एडिटर में खोलें या वेक्टर एडिटर में ऑब्जेक्ट जाँचें। ओवरलैप वाली आकृतियाँ खोजें और फ़ाइल में ऊपर से नीचे पढ़ें। समान स्तर के पहले तत्व पहले रंगे जाते हैं। सामने दिखाई देने वाले ऑब्जेक्ट को उन ऑब्जेक्ट के बाद ले जाएँ जिन्हें उसे ढकना है, फिर प्रति सेव करें।

मसलन, यह सरल आरेख तारे को आखिरी रखता है:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

इस सुधार के लिए पाथ डेटा और फ़िल रंग बदलना ज़रूरी नहीं। डिज़ाइन ऐप में Bring to Front कमांड हो तो उसके बाद SVG एक्सपोर्ट करें और सेव किया मार्कअप जाँचें या दोबारा खोलें। एडिटर का दिखने वाला परत पैनल उपयोगी है, लेकिन अगला रेंडरर वितरण फ़ाइल पढ़ता है।

इंटरैक्टिव SVG में JavaScript मौजूदा चाइल्ड तत्व को उसके वर्तमान पैरेंट के अंत में ले जा सकती है:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

MDN का appendChild संदर्भ पुष्टि करता है कि मौजूदा नोड जोड़ने से वह खिसकता है, दूसरी प्रति नहीं बनती। इसे तभी इस्तेमाल करें जब DOM बदलना ऐप का हिस्सा हो। स्थिर लोगो फ़ाइल में इच्छित क्रम सीधे SVG में रखना सामान्यतः अधिक स्पष्ट है।

समूह, छेद और दूसरे प्रकार के क्रम जाँचें

तारा समूह का हिस्सा हो तो उसे उसी समूह के अंदर आखिरी रखने पर भी पूरा समूह बाद के समान स्तर वाले समूह के पीछे रह सकता है। पैरेंट संरचना जाँचें। पूरा समूह वाला चित्र सामने चाहिए तो संबंधित समूह खिसकाएँ; केवल उसके अंदर हिस्से ओवरलैप करें तो चाइल्ड तत्वों का क्रम बदलें। चाइल्ड तत्व को समूह से बाहर ले जाते समय सावधानी रखें: समूह में ट्रांसफ़ॉर्म, क्लिपिंग, अपारदर्शिता या मास्क हो सकता है। SVG रेंडरिंग मॉडल का समूह खंड समझाता है कि समूह की सामग्री साथ क्यों रेंडर होती है।

ऑब्जेक्ट क्रम का सुधार पाथ ज्यामिति का वास्तविक छेद या अंतर भी ठीक नहीं कर सकता। एक्सपोर्ट के बाद अक्षर या प्रतीक का बीच भर जाए तो आकृतियाँ और गंतव्य फ़ाइल देखें। बाद का अपारदर्शी ऑब्जेक्ट केवल छेद ढक रहा हो सकता है। SVG छेद मार्गदर्शिका उसे फ़िल नियम या कंटूर समस्या से अलग समझाती है। पास की आकृतियों के बीच पतली सफ़ेद रेखा दिखे तो परत बदलने से पहले अंतर की पहचान करें।

आखिर में, paint-order अलग सेटिंग है। वह एक तत्व का फ़िल, स्ट्रोक और मार्कर कब रंगा जाए बदलती है; उसे पास के पाथ के ऊपर नहीं रखती। MDN का paint-order संदर्भ यह दायरा परिभाषित करता है। मोटी आउटलाइन अपना फ़िल छिपाए तो paint-order मार्गदर्शिका इस्तेमाल करें, न कि जब लोगो का एक रंगीन हिस्सा दूसरे को छिपाए।

पोज़िशन किए गए HTML बॉक्स और flex या grid आइटम में CSS z-index अब भी मायने रखता है, जैसा MDN बताता है। पेज लेआउट का वह मामला SVG के अंदर संग्रहित पाथ क्रम से अलग रखें।

PerfectVector के साथ यह कैसा होता है

मौजूदा मूल SVG हो तो उसे इस्तेमाल करें। उसे फिर वेक्टराइज़ करने से नई आकृतियाँ आएँगी, परत का निर्णय हल नहीं होगा। केवल समतल PNG या JPG लोगो मूल हो तो PerfectVector पहले के चरण में मदद कर सकता है: इमेज को संभावित SVG में बदलें, फिर एडिटर में अलग हिस्से और उनका ओवरलैप देखें। देने से पहले पुनर्निर्मित पाथ इच्छित क्रम में रखें। रूपांतरण डिज़ाइन के सामने वाले ऑब्जेक्ट तय नहीं करता और छोटा छेद ट्रेसिंग में सुरक्षित रहने की गारंटी नहीं देता।

मूल इमेज में धुँधलापन, छाया या छोटे अक्षर हों तो उन विवरणों को हाथ से फिर बनाना ट्रेसिंग से अधिक भरोसेमंद हो सकता है। विस्तृत SVG संपादन मार्गदर्शिका रूपांतरण के बाद पाथ सफ़ाई समझाती है।

दी जाने वाली फ़ाइल सत्यापित करें

1. मूल SVG की प्रति सेव करें और केवल इच्छित ऑब्जेक्ट या समूह का क्रम बदलें।
2. सेव फ़ाइल उस आकार पर ब्राउज़र में खोलें जहाँ ओवरलैप मायने रखता है। मूल डिज़ाइन से मिलाएँ।
3. फ़ाइल लेने वाले एडिटर या ऐप में दोबारा खोलें। वही ओवरलैप तथा मास्क, क्लिप क्षेत्र और छेद जाँचें।
4. SVG इंटरैक्टिव हो तो क्रम बदलने के बाद पॉइंटर और होवर व्यवहार परखें। नया सबसे ऊपर वाला ऑब्जेक्ट वहाँ इंटरैक्शन ले सकता है जहाँ पहले दूसरा लेता था।
5. परिणाम केवल एक ज़ूम या एक्सपोर्ट आकार पर गलत लगे तो और ऑब्जेक्ट खिसकाने से पहले सैंपलिंग दरार या वास्तविक अंतर जाँचें।

केवल रास्टर मूल के लिए PerfectVector से संभावित SVG बनाएँ, फिर इच्छित आकार पर उसका पाथ क्रम, छेद और सेव किया रेंडर जाँचें। फ़ाइल में सही वेक्टर आकृतियाँ पहले से हों तो क्रम बदलने से शुरू करें।

अक्सर पूछे जाने वाले सवाल

क्या CSS z-index से एक SVG पाथ सामने ला सकते हैं? एक SVG के अंदर सामान्य समान स्तर की आकृतियों के लिए पाथ दस्तावेज़ क्रम में बाद में रखें। आसपास के पेज बॉक्स को प्रभावित करने वाला CSS z-index उन चाइल्ड तत्वों का क्रम भरोसेमंद ढंग से नहीं बदलता।

क्या paint-order बदलता है कि कौन-सा SVG ऑब्जेक्ट ऊपर है? नहीं। Paint-order एक आकृति या टेक्स्ट तत्व में फ़िल, स्ट्रोक और मार्कर का क्रम बदलता है। कौन किसे ढकेगा बदलने के लिए अलग ऑब्जेक्ट का क्रम बदलें।

समूह में आखिरी रखने पर भी पाथ क्यों छिपा है? उसका पूरा समूह दूसरे समूह के पीछे हो सकता है। चाइल्ड तत्व को समूह से बाहर ले जाने से पहले पैरेंट समूह तथा ट्रांसफ़ॉर्म, क्लिपिंग, मास्क या अपारदर्शिता जाँचें।

स्रोत

1. W3C — SVG 1.1 रेंडरिंग मॉडल — SVG दस्तावेज़ के तत्व रंगने का क्रम परिभाषित करता है।
2. MDN — Node.appendChild() — जोड़ने पर मौजूदा DOM चाइल्ड तत्व कैसे खिसकता है बताता है।
3. MDN — SVG paint-order एट्रिब्यूट — paint-order को आकृति के फ़िल, स्ट्रोक और मार्कर तक सीमित करता है।
4. MDN — CSS z-index प्रॉपर्टी — पेज परतों में पोज़िशन किए गए और लेआउट आइटम के लिए z-index समझाता है।
5. W3C — SVG 2 रेंडरिंग मॉडल — SVG परत संदर्भ, समूह और पॉइंटर लक्ष्य बताता है।