स्केल का भ्रम किए बिना SVG पाथ लंबाई मापें

SVG पाथ मापने के लिए ज्यामिति तत्व पर getTotalLength() चलाएँ, फिर संख्या की निर्देशांक प्रणाली पहचानें। ब्राउज़र उपयोगकर्ता इकाइयों में लंबाई देता है। वह स्वतः दिखती लंबाई, मिलीमीटर माप या मशीन की यात्रा दूरी नहीं।

जैसे, हमारा मूल विकर्ण 50 उपयोगकर्ता इकाइयाँ लंबा है। समान स्केल उसकी रूट-स्थान लंबाई दोगुनी करके 100 करता है, जबकि केवल क्षैतिज दिशा स्केल करने पर लगभग 72.111 होती है। दोनों में स्थानीय API परिणाम 50 रहता है। ये संख्याएँ माप के अलग प्रश्नों के उत्तर हैं।

आर्टवर्क से पहले ज्ञात खंड मापें

सुलभ ज्यामिति वाला SVG और इनलाइन SVG व JavaScript चलाने वाला ब्राउज़र चाहिए। आर्टवर्क की प्रति पर काम करें। परिणाम दर्ज करने से पहले तय करें स्थानीय ज्यामिति, ट्रांसफॉर्म ज्यामिति या निर्दिष्ट भौतिक आकार की लंबाई चाहिए।

पाथ मूव, लाइन, कर्व और क्लोज जैसे कमांड से रास्ता रखता है। उपयोगकर्ता इकाई SVG निर्देशांक प्रणाली की है; मैपिंग जाँचे बिना पिक्सेल या मिलीमीटर न कहें। MDN का getTotalLength() संदर्भ परिणाम को उपयोगकर्ता इकाइयों में ब्राउज़र-गणित पाथ लंबाई बताता है।

पूरा HTML उदाहरण सीधा खंड मापता है। HTML फाइल में सुरक्षित करके ब्राउज़र में खोलें:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG length control</title>
<svg width="240" height="240" viewBox="0 0 120 120">
  <path id="route" d="M10 10 L40 50"
        fill="none" stroke="black" />
</svg>
<pre id="result"></pre>
<script>
  const route = document.querySelector("#route");
  document.querySelector("#result").textContent =
    route.getTotalLength() + " local user units";
</script>
</html>

क्षैतिज बदलाव 30 और खड़ा 40 है, इसलिए अपेक्षित लंबाई sqrt(30² + 40²) = 50 है। जटिल वक्र या आयातित चिह्न पर भरोसे से पहले दिखता परिणाम ज्ञात नियंत्रण देता है। 240-पिक्सेल व्यूपोर्ट स्थानीय परिणाम को 100 उपयोगकर्ता इकाइयाँ नहीं बनाता।

हमारे ब्राउज़र नमूने में 0.01 उपयोगकर्ता इकाई की सहनशीलता घोषित थी। त्रिज्या 10 के चौथाई वृत्त की विश्लेषणात्मक लंबाई 5π, लगभग 15.708 है। टेस्ट ब्राउज़र ने Chrome 155 बताया और लगभग 15.7102 दिया, जो सहनशीलता में था। ब्राउज़र वक्र लंबाई संख्यात्मक रूप से गणना करता है, इसलिए हर कार्यान्वयन से समान अंतिम दशमलव माँगने के बजाय उपयोगी परिशुद्धता और उचित सहनशीलता रखें।

स्थानीय और ट्रांसफॉर्म लंबाइयाँ अलग रखें

अगले दो नमूने वही d="M10 10 L40 50" रखकर ट्रांसफॉर्म जोड़ते हैं:

समान स्केल हर दिशा को समान परिमाण से गुणा करता है, इसलिए दूसरी पंक्ति में स्थानीय लंबाई को 2 से गुणा करना काम करता है। असमान स्केल दिशाएँ अलग संभालता है। तीसरी पंक्ति में बदला खंड 60 इकाइयाँ आड़ा और 40 नीचे है: sqrt(60² + 40²), न कि 50 × 2।

SVG निर्देशांक प्रणाली विनिर्देश बताता है कि ट्रांसफॉर्म और viewBox मैपिंग निर्देशांक प्रणाली कैसे बनाते हैं। लक्ष्य स्थान का नाम दें। रूट SVG उपयोगकर्ता इकाइयों की लंबाई व्यूपोर्ट के CSS पिक्सेल से अब भी अलग है।

इस ज्ञात सीधे खंड के सिरे रूट SVG के उपयोगकर्ता स्थान में मैप किए:

const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);

उलटा रूट मैट्रिक्स रूट की व्यूपोर्ट मैपिंग हटाता है; सापेक्ष मैट्रिक्स पाथ का रूट उपयोगकर्ता स्थान में ट्रांसफॉर्म रखता है। अंश जुड़ा SVG, उलटने योग्य मैट्रिक्स और ऊपर का खास सीधा खंड मानता है। सिरे उस पाथ के स्रोत से ज्ञात हैं।

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

मैपिंग तय करने के बाद ही मिलीमीटर बनाएँ

मूल चिह्न दस्तावेज़ width="50mm", height="50mm" और viewBox="0 0 100 100" घोषित करता है। इच्छित समान मैपिंग में प्रति उपयोगकर्ता इकाई 0.5 मिमी है। चिह्न की बाहरी चौड़ाई 80 इकाइयाँ है, इसलिए नाममात्र चौड़ाई 40 मिमी।

दोनों कंटूर की कुल लंबाई 380 उपयोगकर्ता इकाइयाँ है। घोषित स्केल पर:

50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours

यह बनाए आयामों से गणना है। छपी वस्तु नहीं मापी, मॉनिटर रूलर से नहीं परखा और संपादक आयात आकार नहीं जाँचा। CSS SVG व्यूपोर्ट बदल सकती है और गंतव्य आर्टवर्क रीस्केल कर सकता है। नाममात्र गणना को उत्पादन माप मानने से पहले गंतव्य में डिलीवरी आयाम पुष्टि करें।

पूरा दस्तावेज़ चौड़ाई भी अंदर के आर्टवर्क की चौड़ाई से अलग है। इसके बजाय केवल चिह्न की बाहरी चौड़ाई 50 मिमी करें तो उसकी 80-इकाई चौड़ाई अलग गुणक देती है: 50 / 80 = 0.625 mm per unit। वही 380 इकाइयाँ तब 237.5 मिमी कंटूर होंगी। कौन-सी चौड़ाई तय की, दर्ज करें; पहले विस्तार जाँचना हो तो SVG बाउंडिंग बॉक्स मार्गदर्शिका लें।

pathLength ज्यामिति बदले बिना दूरियाँ कैलिब्रेट करता है

हमने मूल 50-इकाई खंड की pathLength="1" वाली प्रति भी बनाई। उसका getTotalLength() परिणाम 50 रहा। गुण ने सिरे नहीं बदले और ज्यामितीय लंबाई एक इकाई नहीं की।

SVG ज्यामिति API विनिर्देश गणितीय परिणाम से pathLength स्पष्ट बाहर रखता है। MDN का pathLength संदर्भ स्ट्रोक डैश सहित पाथ के साथ दूरी वाले व्यवहार का कैलिब्रेशन बताता है। सामान्यीकृत दूरी वाला प्रभाव बनाते समय उपयोगी है; मूल रास्ता मापने का विकल्प नहीं।

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

कंटूर जोड़ें, लेकिन योग को मशीन यात्रा न बनाएँ

हमारे चिह्न में बाहरी सीमा और हीरे का छेद है। मूल कंपाउंड पाथ दोनों बंद कंटूर रखता है:

<path fill-rule="evenodd"
      d="M10 10 H90 V60 L50 90 L10 60 Z
         M50 25 L65 45 L50 65 L35 45 Z" />

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

योग चुनी सुरक्षित ज्यामिति बताता है। ट्रेस मोटी रेखा के दो सीमा रास्ते हो सकते हैं; डुप्लिकेट पाथ फिर ज्यामिति जोड़ सकता है; चिह्न में छोटे अंदरूनी कंटूर हो सकते हैं जिन्हें संसाधित करना नहीं चाहते। वास्तव में इच्छित ऑब्जेक्ट और कंटूर मापें और कुल समझने से पहले जाँचें।

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

धारणाओं सहित माप दर्ज करें

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

ज्ञात सीधा नियंत्रण घोषित सहनशीलता में 50 न दे तो चुना तत्व और उसका बदला स्रोत डेटा जाँचें। स्थानीय परिणाम मिलें लेकिन नाममात्र आकार अलग हो तो पाथ बदलने से पहले व्यूपोर्ट, ट्रांसफॉर्म और गंतव्य स्केल जाँचें। अधिक दशमलव गलत निर्देशांक मैपिंग नहीं सुधारते।

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

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

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

क्या getTotalLength() पिक्सेल या मिलीमीटर देता है? ब्राउज़र-गणित लंबाई SVG उपयोगकर्ता इकाइयों में देता है। परिणाम व्यूपोर्ट पिक्सेल या नाममात्र भौतिक इकाइयों में बताने से पहले निर्देशांक और आकार मैपिंग स्थापित करें।

पाथ स्केल करने पर स्थानीय API परिणाम क्यों नहीं बदलता? सुरक्षित स्थानीय रास्ता और ट्रांसफॉर्म निरूपण अलग निर्देशांक स्थानों में हैं। समान डेटा खंड ने समान और असमान दोनों स्केल के बाद स्थानीय 50 दिया। ट्रांसफॉर्म लंबाइयाँ 100 और लगभग 72.111 रूट SVG इकाइयाँ थीं।

क्या pathLength="1" का अर्थ पाथ एक इकाई लंबा है? यह समर्थित पाथ-दूरी व्यवहार का कैलिब्रेशन मान देता है। ज्यामिति API की गणितीय लंबाई गुण अनदेखा करती है; हमारा 50-इकाई नियंत्रण फिर भी 50 था।

क्या कंटूर योग से कटाई समय अनुमानित कर सकता हूँ? केवल योग पर्याप्त नहीं। गंतव्य के बने रास्ते, कंटूर के बीच यात्रा, दोहराए पास, गति बदलाव या सामग्री व्यवहार स्थापित नहीं करता। वास्तविक गंतव्य की काम जाँच और उचित उत्पादन परीक्षण लें।

स्रोत

1. MDN: SVGGeometryElement.getTotalLength() — उपयोगकर्ता इकाइयों में ब्राउज़र-गणित पाथ लंबाई।
2. W3C SVG ज्यामिति API — गणितीय लंबाई और pathLength कैलिब्रेशन से स्वतंत्रता।
3. W3C SVG निर्देशांक प्रणालियाँ — व्यूपोर्ट, viewBox और ट्रांसफॉर्म मैपिंग।
4. MDN: pathLength — पाथ के साथ दूरी व्यवहार का कैलिब्रेशन।
5. W3C SVG पाथ — सबपाथ, खींचे खंड और बंद करने वाले कमांड।

मापने से पहले बिटमैप से संपादन योग्य ज्यामिति चाहिए? SVG विकल्प बनाएँ, शामिल कंटूर जाँचें और लंबाई दर्ज करने से पहले इच्छित स्केल तय करें।