SVG बिंदीदार आउटलाइन: दूरी और गोल सिरे नियंत्रित करें

बिंदीदार SVG आउटलाइन में आकृति को स्ट्रोक दें, stroke-linecap="round" करें और शून्य लंबाई डैश के बाद धनात्मक अंतर दें, जैसे stroke-dasharray="0 20"। स्ट्रोक चौड़ाई बिंदु व्यास नियंत्रित करती है। डैश ऐरे का दूसरा अंक पाथ पर बिंदु केंद्रों की दूरी है; यह दृश्य किनारों की खाली जगह नहीं।

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

ये सजावटी स्ट्रोक सेटिंग हैं। नया खिसका सीमा पाथ नहीं बनातीं और हर रंगे बिंदु को अलग कट पाथ नहीं करतीं।

सपाट सिरे, गोल सिरे और बिंदु तुलना करें

stroke-dasharray बारी-बारी रंगी डैश लंबाई और बिना रंग अंतर लंबाई देता है। दो अंक सूची दोहराव जाँचना आसान करती है। MDN डैश ऐरे संदर्भ विषम लंबाई सूची का दोहराकर सम लंबाई क्रम बनना भी बताता है।

यह स्वतंत्र SVG फ़ाइल में कॉपी करके ब्राउज़र में खोलें। हर मूल पाथ 240 इकाइयाँ लंबा और स्ट्रोक चौड़ाई 8 है:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

पहली पंक्ति सपाट सिरों के साथ 12 20 देती है। पूरे डैश 12 इकाइयाँ और दृश्य अंतर 20 है। दूसरी वही अंक गोल सिरों में देती है। हर सिरा मूल डैश अंत से 4 इकाइयाँ जाता है, इसलिए पूरा डैश 20 इकाइयाँ घेरता और दृश्य अंतर 12 होता है।

तीसरी पंक्ति डैश लंबाई शून्य करती है। गोल सिरे इस सीधे पाथ पर 8 व्यास और 20 इकाइयाँ दूर केंद्र वाले बिंदु बनाते हैं। दृश्य किनारों का अंतर 12 इकाइयाँ है। W3C के SVG रंगने के नियम शून्य लंबाई डैश सहित डैश अंत सिरे परिभाषित करते हैं; MDN का सिरे संदर्भ सिरे की ज्यामिति बताता है।

बिना दूरी कैलिब्रेशन या ट्रांसफ़ॉर्म के सीधे खंड पर पूरे अलग डैश की उपयोगी गणना है:

• सपाट सिरा: दृश्य डैश लंबाई = dash; दृश्य अंतर = gap।
• गोल सिरा: दृश्य डैश लंबाई = dash + stroke-width; दृश्य अंतर = gap - stroke-width।
• गोल बिंदु: व्यास = stroke-width; केंद्र दूरी = gap; दृश्य अंतर = gap - stroke-width।

अंतिम गणना शून्य या ऋणात्मक हो तो बिंदु छूते या चढ़ते हैं। मोड़ पर पाथ दूरी और बिंदुओं की सीधी दूरी अलग हैं। पूरे बॉर्डर पर सीधी रेखा अंतर गणना लगाने के बजाय कोने तथा वक्र देखें।

बंद बैज के चारों ओर दोहराव फ़िट करें

नीचे आयताकार बैज पाथ 180 गुणा 120 इकाइयाँ हैं। परिमाप 2 × (180 + 120) = 600 है। पाथ ऊपर बाएँ कोने से घड़ी दिशा में चलता है।

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

बाएँ 0 32 केंद्रों को पाथ दूरी 0, 32, 64 और आगे 576 तक रखता है। शुरुआत लौटने से पहले केवल 24 इकाइयाँ बचती हैं। अंतिम अंतर बाकी 32 इकाई अंतर से छोटा है, इसलिए जोड़ असमान है। SVG प्रदर्शन आकार बढ़ाना अंतर बढ़ाकर दिखाता है, हल नहीं करता।

दाएँ 0 30 परिमाप 20 बराबर अंतर में बाँटता है। इस विशेष आयत में दोनों भुजाएँ 30 से विभाजित होती हैं, इसलिए कोने बिंदुओं से मिलते हैं। सीधे किनारे पर 8 इकाई बिंदु 22 इकाई दृश्य जगह देते हैं। यह चुने बैज का दोहराव सुधारता है; हर वक्र पर समान दृश्य दूरी का वादा नहीं।

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

stroke-dashoffset पाथ पर पैटर्न की शुरुआत खिसकाता है। स्पष्ट जोड़ कम दिखती जगह रख सकता है, लेकिन 32 इकाई दोहराव से 600 विभाजित नहीं करता। समान समापन लक्ष्य हो तो फ़िट दोहराव दें। MDN डैश ऑफ़सेट संदर्भ चरण समायोजन बताता है।

हमने दोनों स्वतंत्र SVG अलग खोलकर इस तुलना से ब्राउज़र रेंडर मिलाया। उदाहरण इकाई रहित मान, बिना pathLength कैलिब्रेशन, ट्रांसफ़ॉर्म या बाहरी CSS हैं। वे हाथ से बने पाथ दिखाते हैं, PerfectVector रूपांतरण या अलग ऐप अनुकूलता परीक्षण नहीं।

आकार और रंग सेटिंग समान रखें

ऊपर की तरह SVG के अपने निर्देशांक अंक से शुरू करें। प्रतिशत लगाकर उन्हें परिमाप का समान अंश न मानें। डैश ऐरे संदर्भ प्रतिशत को पाथ लंबाई के बजाय व्यूपोर्ट से तय बताता है।

दूरी सामान्य करने को pathLength दें तो उसी कैलिब्रेट दूरी तंत्र में डैश गणना करें। इस उदाहरण का बिना कैलिब्रेशन परिमाप दूसरे कोड के सामान्य डैश मानों से न मिलाएँ। SVG स्ट्रोक एनीमेशन मार्गदर्शिका ड्रॉइंग को क्रमशः प्रकट करने के लिए SVG के अंतर्निहित पाथ लंबाई कैलिब्रेशन का अलग इस्तेमाल दिखाती है।

केवल बॉर्डर चाहिए तो fill="none" दें। स्ट्रोक का हिस्सा डैश होने पर भी भराव दिख सकता है। अपेक्षित बिंदु गायब हों तो पुष्टि करें कि तत्व का स्ट्रोक दिखाई देता है और किसी CSS नियम ने उसके प्रस्तुति एट्रिब्यूट को ओवरराइड नहीं किया है। गायब स्ट्रोक जाँच सूची दूरी बदलने से पहले वह जाँच बताती है।

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

कलाकृति तैयारी और बॉर्डर डिज़ाइन अलग करें

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

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

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

अंतिम आउटलाइन जाँचें

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

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

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

गोल सिरे चुनने के बाद डैश पास क्यों लगते हैं? गोल सिरे दोनों डैश अंत से आगे जाते हैं। अलग निशानों वाले सीधे खंड में पूरे डैश का दृश्य अंतर तय अंतर घटा स्ट्रोक चौड़ाई है।

छोटी गोलियों की जगह गोल बिंदु कैसे बनाऊँ? शून्य लंबाई डैश, धनात्मक अंतर और गोल सिरे दें। मसलन, स्ट्रोक चौड़ाई 8 और stroke-dasharray="0 20" सीधे पाथ पर 8 इकाई बिंदु तथा 20 इकाई केंद्र दूरी देती है।

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

स्रोत

1. MDN — stroke-dasharray — बारी-बारी डैश और अंतर सूची तथा मान सँभालना परिभाषित करता है।
2. MDN — stroke-linecap — सपाट और गोल सिरे की ज्यामिति तथा शून्य लंबाई व्यवहार समझाता है।
3. W3C — SVG रंगना — डैश रंगना, सिरे और उपपाथ पैटर्न सँभालना बताता है।
4. MDN — stroke-dashoffset — डैश पैटर्न खिसकाने वाला ऑफ़सेट परिभाषित करता है।

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