SVG पॉइंटर इवेंट: क्लिक क्षेत्र चित्र से मिलाएँ

SVG pointer-events नियंत्रित करता है कि ग्राफ़िक के कौन से हिस्से पॉइंटर इवेंट का लक्ष्य बन सकते हैं। भरा आकार, पतला स्ट्रोक और खाली छेद एक ही चित्र में होने पर भी अलग प्रतिक्रिया दे सकते हैं। लक्ष्य क्षेत्र उस क्रिया से मिलाएँ जिसकी पाठक अपेक्षा करता है, फिर खाली जगह उतनी ही सावधानी से जाँचें जितनी रंगीन जगह।

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

क्लिक प्राप्त करने वाले एलिमेंट से शुरू करें

SVG में डिफ़ॉल्ट auto मान visiblePainted जैसा व्यवहार करता है। दिखाई देने वाले आकार के भरण पर उसे लक्ष्य बनाया जा सकता है जब fill, none न हो, या स्ट्रोक पर जब stroke, none न हो। SVG इंटरैक्टिविटी विनिर्देश ये लक्ष्य जाँच नियम परिभाषित करता है।

इससे समझ आता है कि आइकन टूटा क्यों लगता है: उसका लिसनर आउटलाइन पर काम कर सकता है लेकिन खाली केंद्र पर चूक सकता है। ब्राउज़र आकार जाँचता है; यह नहीं मानता कि आसपास के आयत का हर बिंदु एक ही अर्थ रखता है।

इस कार्यप्रवाह के उपयोगी चुनाव:

all का मतलब “SVG व्यूपोर्ट का हर बिंदु” नहीं है। वह अब भी एलिमेंट की ज्यामिति को संदर्भित करता है। बारीक चित्र के आसपास किसी खास आयत से प्रतिक्रिया चाहिए तो वह आयत सोच-समझकर बनाएँ।

पारदर्शी रंग और रंग न होने का अंतर भी देखें। fill="transparent" अब भी भरण का मान है; fill="none" भरण हटाता है। केवल अपारदर्शिता बदलना ओवरले से क्लिक अनदेखे कराने का भरोसेमंद तरीका नहीं है।

भरण, छेद और खुला स्ट्रोक जाँचें

हमने मौलिक हाथ से लिखे आकारों से छोटा इनलाइन SVG परीक्षण बनाया। उसमें आयताकार छेद वाला नीला कंपाउंड पाथ, नारंगी खुला स्ट्रोक और अलग पारदर्शी लक्ष्य पर उसी स्ट्रोक की प्रति है। ये शिक्षण उदाहरण हैं, PerfectVector रूपांतरण परिणाम नहीं।

ब्राउज़र परीक्षण में नीली पट्टी पर क्लिक ने ring दर्ज किया। उसके खाली केंद्र पर क्लिक ने धारण करने वाला SVG ring-stage दर्ज किया। नारंगी लाइन ने trail दर्ज किया, जबकि उसकी चोटी के नीचे की जगह ने stroke-stage दर्ज किया। तीसरे पैनल में दोनों स्थानों ने hit दर्ज किया।

नीला पाथ दो आयताकार उपपाथ और fill-rule="evenodd" इस्तेमाल करता है:

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

सम-विषम भरण नियम के अनुसार अंदर का आयत भरे क्षेत्र के बाहर है। यह वास्तविक छेद है। ऊपर लगा सफ़ेद आयत अपने लक्ष्य व्यवहार वाला अलग रंगा आकार होगा। ज्यामिति ही गलत हो तो इवेंट नियम बदलने से पहले SVG छेद मरम्मत मार्गदर्शिका लें।

दूसरे पैनल का खुला स्ट्रोक:

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

जल्दी परीक्षण के लिए किसी भी स्निपेट को HTML फ़ाइल में रखें और उसके बाद यह लॉगर जोड़ें। SVG को दृश्य आकार दें, जैसे width="360" height="270"।

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

रंगे क्षेत्र, खाली अंदरूनी हिस्से और चित्र के बाहर के कोने पर क्लिक करें। event.target दर्ज करने से पाथ पर लगा क्लिक और केवल SVG कंटेनर तक पहुँचा क्लिक अलग पता चलता है। ये उदाहरण लक्ष्य चयन जाँचते हैं; ये तैयार इंटरैक्टिव नियंत्रण नहीं हैं।

चित्र मोटा किए बिना क्लिक लक्ष्य जोड़ें

मान लें नारंगी पाथ के आसपास का पूरा क्षेत्र उसे चुने। दृश्य स्ट्रोक बढ़ाने से चित्र बदल जाएगा। अलग लक्ष्य इंटरैक्शन क्षेत्र को अपनी ज्यामिति देता है:

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

आयत चित्र के पीछे बैठता है। नारंगी पाथ पॉइंटर का लक्ष्य नहीं बनता, इसलिए उसके आर-पार क्लिक आयत तक पहुँच सकते हैं। उसके निर्देशांक इच्छित लक्ष्य स्पष्ट तय करते हैं; दिखाई देने वाला पाथ डेटा दूसरे पैनल के समान रहता है।

यह आरेख क्षेत्र या ऐसी पतली लाइन के लिए उपयोगी है जिस पर पॉइंट करना कठिन हो। लक्ष्य असंबंधित नियंत्रणों से ओवरलैप न करें और तय करें कि दो क्षेत्र मिलने पर क्या होगा। बड़ा अदृश्य आकार पड़ोसी के क्लिक उतनी ही आसानी से रोक सकता है जितना दृश्य आकार।

एक क्रिया करने वाले साधारण आइकन के लिए ब्राउज़र का अंतर्निहित HTML बटन अक्सर SVG आयत जोड़े बिना ही ज़रूरी लक्ष्य देता है।

कीबोर्ड सक्रियण नियंत्रण पर रखें

पॉइंटर लक्ष्य चयन लेबल, कीबोर्ड सक्रियण या बटन अर्थ नहीं देता। एक क्रिया वाला आइकन नाम वाले HTML बटन में रखें और चित्र सजावटी रखें:

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

ब्राउज़र का अंतर्निहित बटन एलिमेंट नियंत्रण व्यवहार देता है; दिखाई देने वाला टेक्स्ट उसका नाम देता है। दिखाई देने वाला फ़ोकस संकेत रखें। क्रिया दूसरे पृष्ठ पर ले जाए तो वास्तविक लिंक इस्तेमाल करें।

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

pointer-events: none सेट करना अक्षम स्थिति भी नहीं है। यह अन्यथा फ़ोकस योग्य नियंत्रण को कीबोर्ड नेविगेशन से नहीं हटाता। MDN कीबोर्ड फ़ोकस और इवेंट प्रसार दोनों बताता है: वंशज फिर लक्ष्य चयन चालू कर सकते हैं और उनके इवेंट अब भी पैरेंट लिसनर से गुजर सकते हैं। बटन अक्षम चाहिए तो अंतर्निहित disabled एट्रिब्यूट लें।

जब शुरुआती चित्र PNG हो

केवल सपाट PNG या JPG स्रोत हो और इंटरफ़ेस को स्वतंत्र रूप से संपादन योग्य आकार चाहिए हों तो PerfectVector का छवि से वेक्टर कार्यप्रवाह जाँच के लिए प्रारंभिक SVG तैयार कर सकता है। मूल से तुलना करें, ज़रूरी छेद और क्षेत्र देखें और तय करें कि किन हिस्सों को अलग इंटरैक्शन लक्ष्य चाहिए।

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

आइकन नियंत्रण में केवल सजावटी हो तो CSS मास्क आइकन उसके रंग व्यवहार के अनुकूल हो सकता है; क्रिया अब भी बाहरी नियंत्रण संभालता है। व्यापक वेक्टराइज़ेशन मार्गदर्शिका बताती है कि पाथ वापस बनाना कब उपयोगी है।

जारी करने से पहले इच्छित क्षेत्र सत्यापित करें

वास्तविक प्रदर्शन आकार जाँचें, केवल बड़ा संपादक पूर्वावलोकन नहीं:

1. भरे क्षेत्र, स्ट्रोक, हर छेद और खाली कोनों पर क्लिक करें।
2. गलत क्रिया चले तो इवेंट लक्ष्य देखें।
3. पॉइंटर रोकने वाले पारदर्शी आयत या ओवरले जाँचें।
4. सुनिश्चित करें कि पड़ोसी लक्ष्य अप्रत्याशित ओवरलैप नहीं करते।
5. उचित जगह Tab, Enter और Space इस्तेमाल करें और फ़ोकस दिखाई दे।
6. इंटरफ़ेस द्वारा समर्थित डिवाइस पर स्पर्श इंटरैक्शन जाँचें।

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

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

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

SVG केवल आउटलाइन पर क्लिक करने से प्रतिक्रिया क्यों देता है? डिफ़ॉल्ट SVG पॉइंटर व्यवहार में बिना भरा आकार केवल रंगे स्ट्रोक पर लक्ष्य बन सकता है। भरण मान और इच्छित क्रिया जाँचें। खाली जगह भी वही क्रिया सक्रिय करे तो सोच-समझकर बना लक्ष्य या बाहरी अंतर्निहित नियंत्रण लें।

क्या pointer-events="all" पूरा SVG क्लिक योग्य बनाता है? यह रंग या दृश्यता मान की परवाह किए बिना एलिमेंट के भरण और स्ट्रोक क्षेत्र लक्ष्य बनाता है। पूरा SVG व्यूपोर्ट अपने आप लक्ष्य नहीं बनता। वह क्षेत्र चाहिए तो स्पष्ट आकार जोड़ें या बाहरी नियंत्रण लें।

क्या पारदर्शी आयत क्लिक प्राप्त कर सकता है? हाँ। पारदर्शिता का मतलब आयत में ज्यामिति या भरण न होना नहीं है। उचित pointer-events मान वाला पारदर्शी आयत सोच-समझकर बना लक्ष्य हो सकता है, लेकिन गलती से क्लिक रोक भी सकता है।

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

स्रोत

1. W3C — SVG 2 स्क्रिप्टिंग और इंटरैक्टिविटी — SVG पॉइंटर लक्ष्य चयन और pointer-events मानों की ज्यामिति परिभाषित करता है।
2. W3C — SVG 2 चित्रण — भरण नियम से पाथ का अंदरूनी क्षेत्र और छेद कैसे तय होते हैं।
3. MDN — pointer-events — लक्ष्य चयन, प्रसार, विरासत और कीबोर्ड फ़ोकस सीमाएँ समझाता है।
4. MDN — बटन एलिमेंट — ब्राउज़र का अंतर्निहित बटन व्यवहार, नाम और अक्षम स्थिति का दस्तावेज़।