SVG मार्कर: संरेखित रहने वाले कस्टम तीर सिरे बनाएँ

SVG पाथ पर कस्टम तीर सिरा जोड़ने के लिए उसका चित्र <marker> के अंदर परिभाषित करें और marker-end से उसकी ID का संदर्भ दें। refX और refY को चित्र के उस बिंदु पर रखें जो पाथ के अंतिम बिंदु से मिलना चाहिए। फिर चुनें कि मार्कर पाथ के साथ घूमे और उसकी स्ट्रोक चौड़ाई के साथ बढ़े या नहीं।

ये चुनाव अलग समस्याएँ हल करते हैं। तीर सही दिशा में होकर भी अपने अंतिम बिंदु से चूक सकता है। वह पतले स्ट्रोक पर सही मिलकर लाइन भारी होने पर बहुत बड़ा भी हो सकता है। यह उदाहरण एक मौलिक पॉइंटर आकार से स्थिति, दिशा और आकार अलग करता है।

छोटे, पूरे SVG से शुरू करें

नीचे की सामग्री markers.svg में सहेजकर ब्राउज़र में खोलें। पॉइंटर हाथ से लिखा उदाहरण है, जिसकी नोक 12 × 12 निर्देशांक क्षेत्र में (11, 6) पर है। यह PerfectVector रूपांतरण परिणाम नहीं।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

पहला पाथ सीधा है; दूसरा वक्र। दोनों दोनों सिरों पर एक ही मार्कर का संदर्भ देते हैं। <defs> ब्लॉक परिभाषा रखता है, जबकि पाथ के संदर्भ उसे दिखाते हैं। MDN का marker संदर्भ शुरू, बीच और अंत के जुड़ाव गुण बताता है।

धारण करने वाले दस्तावेज़ में अद्वितीय ID लें। कई SVG इनलाइन मिलाने पर मार्कर ID में उपसर्ग लगाएँ और हर मिलते url(#...) संदर्भ को अपडेट करें। SVG प्रतीक स्प्राइट मार्गदर्शिका दोबारा इस्तेमाल आइकन के लिए यही संदर्भ प्रबंधन समस्या समझाती है।

इच्छित बिंदु को अंतिम बिंदु पर रखें

refX="11" refY="6" बताता है कि मार्कर चित्र का कौन सा बिंदु पाथ के अंतिम बिंदु से मिलना चाहिए। इससे पाथ खुद नहीं खिसकता। इस उदाहरण में वह बिंदु नुकीला सिरा है।

इसकी तुलना refX="0" refY="0" से करें। ब्राउज़र मार्कर का निर्देशांक मूल बिंदु अंतिम बिंदु पर रखता है, जिससे क्षैतिज लाइन पर नोक अधिक दाईं ओर और नीचे रहती है। मार्कर का आकार बढ़ाने से गलती अधिक दिखती है; एंकर ठीक नहीं होता।

MDN refX और refY को मार्कर संदर्भ बिंदु के निर्देशांक बताता है। दिखती चौड़ाई से अनुमान लगाने के बजाय उन्हें चित्र के अपने निर्देशांक, उसके viewBox सहित, के अनुसार पढ़ें।

हमने पूरा SVG अलग खोला और तुलना ब्राउज़र में रेंडर की। संदर्भ बिंदु बदलने से नोक नारंगी क्रॉस पर आई। ओरिएंटेशन बदलने से शुरुआत का तीर उलटा। इकाई मोड बदलने से नियंत्रित हुआ कि पॉइंटर लाइन के साथ बढ़े या नहीं। ये अवलोकन इस उदाहरण पर लागू हैं; वास्तविक निर्यात फ़ाइल उसे प्राप्त करने वाले एप्लिकेशन में देखें।

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

वक्र को दिशा तय करने दें

पाथ के अंत वाले तीर सिरे के लिए orient="auto" उस बिंदु पर पाथ की दिशा अपनाता है। वक्र की अंतिम दिशा उसकी स्थानीय स्पर्शरेखा से आती है, इसलिए तीर को पाथ के दोनों अंतिम बिंदुओं के बीच की सीधी दिशा में होना ज़रूरी नहीं।

दोनों सिरों पर तीर के लिए orient="auto-start-reverse" लें। अंत में यह auto जैसा है, लेकिन शुरुआती मार्कर को अतिरिक्त 180 डिग्री घुमाता है। MDN का orient दस्तावेज़ इसे दोनों सिरों से बाहर की ओर इशारा करने वाला एक तीर सिरा दोबारा इस्तेमाल करने का तरीका बताता है।

ऊपरी-दाएँ तुलना में अंतर दिखता है: auto के साथ शुरुआती पॉइंटर वक्र की ओर है। auto-start-reverse के साथ वह शुरुआत से बाहर की ओर है। हाथ से फ़्लिप की गई आकार की दूसरी प्रति नहीं चाहिए।

परिणाम आश्चर्यजनक हो तो पाथ दिशा जाँचें। पाथ उलटने से बदलता है कि कौन सा सिरा शुरुआत है। प्रवाह दिखाने वाला तीर उसी दिशा के अनुसार जुड़ना चाहिए, भले दोनों सिरे पहले वाली स्क्रीन स्थितियों में ही हों।

तय करें कि लाइन मोटाई से मार्कर आकार बदलना चाहिए या नहीं

markerUnits मार्कर के आयाम और कंटेंट की निर्देशांक प्रणाली तय करता है। उसका डिफ़ॉल्ट strokeWidth है; विकल्प userSpaceOnUse है। अंतर के लिए MDN का markerUnits संदर्भ देखें।

पॉइंटर अपने viewBox की 12 क्षैतिज इकाइयों में 10 घेरता है। markerWidth="6" और markerUnits="strokeWidth" के साथ उसकी बिना घूमी चौड़ाई 10 / 12 × 6 × stroke-width है: 4 इकाई स्ट्रोक पर 20 यूज़र इकाइयाँ और 8 इकाई पर 40। नीचे-बाएँ तुलना यही सेटिंग इस्तेमाल करती है।

दोनों स्ट्रोक मोटाइयों पर पॉइंटर 20 इकाइयाँ चौड़ा रखने के लिए परिभाषा बदलें:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

नीचे-दाएँ तुलना इन्हीं मानों का इस्तेमाल करती है। केवल इकाई मोड बदलते हुए markerWidth="6" रखने से बहुत छोटा पॉइंटर बनेगा, क्योंकि 6 इकाइयाँ अब स्ट्रोक चौड़ाई से गुणा नहीं होंगी।

userSpaceOnUse का मतलब स्क्रीन पिक्सेल की स्थिर संख्या नहीं। आसपास का SVG या उसकी निर्देशांक प्रणाली स्केल करने से प्रदर्शन आकार फिर भी बदल सकता है। अंतिम लेआउट आकार पर मार्कर देखें, खासकर जब बड़ा मोटिफ छोटे आरेख संकेत में घटाया जा रहा हो।

मार्कर बनाने से पहले कस्टम मोटिफ तैयार करें

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

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

परीक्षण में रंग स्पष्ट रखें। इस उदाहरण में नीला-हरा मार्कर और गहरी नीली लाइन है ताकि उनकी सीमा दिखाई रहे। यदि अपना तीर पूरी तरह एक रंग का चाहिए, तो दोनों रंग सोच-समझकर सेट करें और डिलीवरी परिणाम देखें। SVG रंग संपादन मार्गदर्शिका तय भरण और रंग बदलने में बाधा वाले स्टाइल समझाती है।

जहाँ फ़ाइल इस्तेमाल होगी, वहीं जाँचें

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

• पैकिंग या ऑप्टिमाइज़ेशन के बाद सुनिश्चित करें कि हर url(#...) इच्छित मार्कर ID पर जाता है।
• सीधे और वक्र पाथ जाँचें, शुरुआती मार्कर इस्तेमाल हो तो उसे भी।
• डिज़ाइन की सबसे पतली और सबसे मोटी लाइन मिलाएँ।
• अंतिम प्रदर्शन आकार पर नोक, जोड़ और कटे चित्र देखें।
• डिलीवरी SVG स्वतंत्र रूप से दोबारा खोलें और स्रोत पूर्वावलोकन से मिलाएँ।

मार्कर पाथ स्थितियों से जुड़ी दिखाई देने वाली सजावट हैं। ये आरेख ऑब्जेक्ट के बीच अर्थपूर्ण संबंध नहीं बनाते। आरेख संपादक के अपने कनेक्शन बिंदु और स्टेंसिल व्यवहार के लिए उसकी अपनी आकार प्रणाली इस्तेमाल करें; draw.io कस्टम आकार मार्गदर्शिका वह अलग काम बताती है।

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

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

मेरा SVG तीर सिरा लाइन से हटकर क्यों है? मार्कर चित्र के निर्देशांक के अनुसार refX और refY जाँचें। वे पाथ अंतिम बिंदु पर रखे जाने वाले बिंदु को पहचानते हैं। यहाँ नोक 11,6 पर है; 0,0 इस्तेमाल करने से उसकी जगह मूल बिंदु रखा जाता है।

एक तीर सिरा दोनों सिरों पर कैसे इस्तेमाल करूँ? marker-start और marker-end से एक ही मार्कर का संदर्भ दें और orient="auto-start-reverse" लें। शुरुआती मार्कर इंस्टेंस उलटता है, जबकि अंतिम मार्कर इंस्टेंस पाथ की दिशा अपनाता है।

लाइन मोटी करने पर तीर सिरा क्यों बढ़ता है? डिफ़ॉल्ट markerUnits मान strokeWidth है। जब मार्कर को एलिमेंट के यूज़र निर्देशांक में आकार बनाए रखना हो तो userSpaceOnUse लें, फिर उस इकाई प्रणाली के लिए markerWidth और markerHeight समायोजित करें।

क्या मार्कर तीर को एक बंद पाथ बना देता है? नहीं। मार्कर परिभाषा उसका संदर्भ देने वाले पाथ से अलग रहती है। आगे के कटिंग या संपादन कार्यप्रवाह को ज़रूरत हो तो वास्तविक जुड़ी ज्यामिति तैयार करके देखें।

स्रोत

1. MDN — marker — मार्कर परिभाषाएँ, समर्थित आकार और जुड़ाव गुण।
2. MDN — refX — मार्कर निर्देशांक प्रणाली में क्षैतिज संदर्भ बिंदु की स्थिति।
3. MDN — refY — मार्कर निर्देशांक प्रणाली में ऊर्ध्व संदर्भ बिंदु की स्थिति।
4. MDN — orient — स्वचालित घुमाव और शुरुआती मार्कर इंस्टेंस का उलटना।
5. MDN — markerUnits — स्ट्रोक सापेक्ष और यूज़र निर्देशांक आकार।

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