> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG हैच फ़िल: पेन प्लॉटर के लिए वास्तविक पाथ बनाएँ

> बंद SVG क्षेत्र से खुले हैच पाथ बनाएँ। मूल Paper.js उदाहरण में छेद, दूरी, कोण और सहेजी फ़ाइल की जाँच दोहराएँ।

Source: https://perfectvector.com/hi/blog/hatch-fill-svg-pen-paths

Language: hi
Author: Irene Kim
Published: 2026-10-11T08:00:00+09:00
Updated: 2026-10-11T08:00:00+09:00

पेन प्लॉटर के लिए SVG में हैच भरने हेतु इच्छित बंद क्षेत्र के भीतर खुली रेखाएँ बनाएँ, सीमाओं पर बाँटें और बचे खंड ज्यामिति के रूप में निर्यात करें। मशीन का काम बनाने से पहले सहेजी फ़ाइल में छेद पार करती या आकृति से बाहर जाती रेखाएँ जाँचें।

रंगीन फ़िल या पट्टियों वाला प्रीव्यू अपने आप ड्रॉइंग मार्ग नहीं देता। यह ट्यूटोरियल आयताकार छेद वाला मूल पाँच-भुजी चिह्न बनाता है, Paper.js से खुली रेखाओं का उस क्षेत्र से intersection लेता है और सहेजे SVG फिर खोलता है। जाँचें डिजिटल केंद्ररेखा ज्यामिति स्थापित करती हैं, सफल वास्तविक प्लॉट नहीं।

## 1. भरने का क्षेत्र चुनें, वापस पाने की रेखा नहीं

ऐसा बंद क्षेत्र चाहिए जिसके छेद उसकी ज्यामिति में हों। ठोस आकृति पर रखा सफ़ेद आयत छेद जैसा लग सकता है, लेकिन नीचे का क्षेत्र पूरा रह सकता है। GRBL-Plotter का [हैच-फ़िल दस्तावेज़](https://grbl-plotter.de/index.php?id=hatch-fill) ओवरलैप ऑब्जेक्ट और एक पाथ के भीतर छेद का यह अंतर दिखाता है। हमने यहाँ GRBL-Plotter नहीं चलाया।

मोटी रास्टर रेखा के बीच का एक स्ट्रोक वापस चाहिए तो [सिंगल-लाइन SVG गाइड](https://perfectvector.com/hi/blog/drawing-to-single-line-svg) लें। हैचिंग क्षेत्र में कई स्ट्रोक बनाती है; मूल पेन केंद्ररेखा वापस नहीं लाती।

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

## 2. क्लिप दिखावट और कटे पाथ अलग पहचानें

SVG [पैटर्न](https://www.w3.org/TR/SVG2/pservers.html#Patterns) दोहराई टाइल रंगता है। [क्लिपिंग पाथ](https://www.w3.org/TR/css-masking-1/#ClippingPaths) मूल ज्यामिति बदले बिना रेंडर क्षेत्र सीमित करता है। दोनों स्क्रीन इमेज बना सकते हैं, लेकिन ऐप को उस रूप को पेन मार्ग में बदलने का तरीका फिर भी चाहिए।

हमारा केवल-क्लिप नियंत्रण दस क्षैतिज रेखाएँ रखता है, हर एक 200 यूज़र इकाई लंबी। क्लिप बाहर के भाग और आयताकार छेद छिपाती है। सहेजी लंबाई फिर भी कुल 2,000 इकाई है।

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

![वास्तविक दोबारा खोले SVG, जिनमें केवल-क्लिप हैच प्रीव्यू की तुलना दो दूरियों और 30-डिग्री कोण के स्पष्ट खुले हैच पाथ से है](https://perfectvector.com/blog/hatch-fill-svg-pen-paths/hatch-routes.webp)

*मूल डिजिटल परीक्षण सामग्री और वास्तविक Paper.js निर्यात। तीनों मार्ग फ़ाइलों में छेद खुला है। जाँच केंद्ररेखाओं की है; प्लॉटर या असली पेन परीक्षण नहीं किया गया।*

[SVG पैटर्न इकाई गाइड](https://perfectvector.com/hi/blog/svg-pattern-units) इच्छित आउटपुट दोहराया रंग हो तो उसे समझाती है। यहाँ स्पष्ट खुली ज्यामिति चाहिए।

## 3. पूरा Paper.js उदाहरण चलाएँ

ब्राउज़र, टेक्स्ट एडिटर और [आधिकारिक रिलीज़](https://github.com/paperjs/paper.js/releases/tag/v0.12.18) का पूरा Paper.js 0.12.18 बिल्ड लें। `paper-full.min.js` को `library` फ़ोल्डर में रखें। यह HTML `generate.html` और अगला JavaScript `hatch.js` उसी फ़ोल्डर के पास सहेजें। मूल चिह्न कोड में है।

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Generate original hatch routes</title>
<canvas id="work" width="200" height="140" hidden></canvas>
<p id="status">Running</p>
<pre id="export-receipt"></pre>
<h2>0 degrees, 10-unit spacing</h2>
<img id="preview-coarse" width="400" alt="Coarse hatch">
<pre id="svg-coarse"></pre>
<h2>0 degrees, 5-unit spacing</h2>
<img id="preview-dense" width="400" alt="Dense hatch">
<pre id="svg-dense"></pre>
<h2>30 degrees, 10-unit spacing</h2>
<img id="preview-angled" width="400" alt="Angled hatch">
<pre id="svg-angled"></pre>
<script src="library/paper-full.min.js"></script>
<script src="hatch.js"></script>
</html>
```

```javascript
paper.setup(document.getElementById('work'));

// Original area: a five-sided boundary with a rectangular hole.
const areaData = 'M20 20 L140 20 L180 60 L180 120 L20 120 Z ' +
  'M60 50 L60 90 L110 90 L110 50 Z';
const configurations = [
  { id: 'coarse', angle: 0, spacing: 10 },
  { id: 'dense', angle: 0, spacing: 5 },
  { id: 'angled', angle: 30, spacing: 10 }
];

function makeHatch(angle, spacing) {
  const area = new paper.CompoundPath({
    pathData: areaData,
    fillRule: 'nonzero',
    insert: false
  });
  const radians = angle * Math.PI / 180;
  const direction = new paper.Point(Math.cos(radians), Math.sin(radians));
  const normal = new paper.Point(-direction.y, direction.x);
  const center = new paper.Point(100, 70);
  const delivery = new paper.Group({ insert: false });

  for (let offset = -200 + spacing / 2; offset < 200; offset += spacing) {
    const origin = center.add(normal.multiply(offset));
    const line = new paper.Path.Line({
      from: origin.subtract(direction.multiply(300)),
      to: origin.add(direction.multiply(300)),
      insert: false
    });
    const kept = line.intersect(area, { trace: false, insert: false });
    const parts = kept instanceof paper.CompoundPath ? [...kept.children] : [kept];
    const routes = parts.filter(path => path.length > 1e-7);
    for (const path of routes) {
      if (path.closed || path.segments.length !== 2) {
        throw new Error('Expected one open straight segment');
      }
      if (path.firstSegment.point.dot(direction) > path.lastSegment.point.dot(direction)) {
        path.reverse();
      }
    }
    routes.sort((a, b) => a.firstSegment.point.dot(direction) - b.firstSegment.point.dot(direction));
    for (const path of routes) {
      path.fillColor = null;
      path.strokeColor = '#2f6977';
      path.strokeWidth = 1;
      path.strokeCap = 'butt';
      delivery.addChild(path);
    }
    if (kept instanceof paper.CompoundPath || routes.length === 0) {
      kept.remove();
    }
    line.remove();
  }
  area.remove();
  const geometry = delivery.exportSVG({ asString: true, precision: 6 });
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="70mm" ' +
    'viewBox="0 0 200 140">' + geometry + '</svg>';
  const routeCount = delivery.children.length;
  const drawnLength = delivery.children.reduce((sum, path) => sum + path.length, 0);
  let transitionLength = 0;
  for (let index = 1; index < routeCount; index += 1) {
    transitionLength += delivery.children[index - 1].lastSegment.point
      .getDistance(delivery.children[index].firstSegment.point);
  }
  delivery.remove();
  return { svg, routeCount, drawnLength, transitionLength };
}

const receipt = { paper: paper.version, units: 'viewBox user units; 0.5 mm per unit', rows: [] };
for (const configuration of configurations) {
  const result = makeHatch(configuration.angle, configuration.spacing);
  document.getElementById('svg-' + configuration.id).textContent = result.svg;
  const preview = document.getElementById('preview-' + configuration.id);
  preview.src = URL.createObjectURL(new Blob([result.svg], { type: 'image/svg+xml' }));
  receipt.rows.push({ ...configuration, route_count: result.routeCount,
    drawn_length: result.drawnLength, transition_length: result.transitionLength });
}
document.getElementById('export-receipt').textContent = JSON.stringify(receipt, null, 2);
document.getElementById('status').textContent = 'Generated. Save each exact SVG shown below, then reopen those saved files for independent checks.';
```

ब्राउज़र में `generate.html` खोलें। हमने Chromium 155 में Paper.js 0.12.18 से चलाया। हर परिणाम में प्रीव्यू और सटीक SVG मार्कअप दोनों हैं। तीन पूरे SVG स्ट्रिंग को `hatch-coarse.svg`, `hatch-dense.svg` और `hatch-angled.svg` में कॉपी करें, फिर सहेजी फ़ाइलें स्वतंत्र खोलें।

महत्वपूर्ण कॉल `line.intersect(area, { trace: false, insert: false })` है। Paper.js में [`trace: false`](https://paperjs.org/reference/pathitem/#intersect-path) पहले पाथ को intersections पर बाँटता और दूसरे पाथ के क्षेत्र में उसके वक्र रखता है। इससे खुले हैच खंड बचते हैं। डिफ़ॉल्ट area-tracing मोड अलग बूलियन सवाल हल करता है; [Paper.js भरी आकृति गाइड](https://perfectvector.com/hi/blog/paperjs-svg-booleans) वह कार्यप्रवाह बताती है।

फ़ंक्शन `fillColor` को null करता और हर मार्ग को स्ट्रोक देता है। निर्यात से पहले दो-बिंदु खुले परिणाम भी जाँचता है। बंद क्षेत्र निर्माण सहायक रहता है और डिलीवरी समूह में नहीं जाता।

## 4. दूरी, कोण और भौतिक स्केल साथ जाँचें

तीनों निर्यात `width="100mm"`, `height="70mm"` और `viewBox="0 0 200 140"` बताते हैं। SVG में एक यूज़र इकाई 0.5 mm बनती है। इसलिए 10-इकाई हैच दूरी 5 mm और 5 इकाई 2.5 mm है।

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

ऑफ़सेट लूप हैच चरण को आधी दूरी पर स्थिर रखता है। चरण बदलने से रेखा किन सीमा विशेषताओं से मिलती है बदल सकता है। इस SVG निर्देशांक तंत्र में धनात्मक 30° दिशा दाएँ-नीचे जाती है। दूरी समानांतर रेखाओं के लंबवत मापी जाती है, स्क्रीन पर उनकी लंबवत अलगाव दूरी नहीं।

| सहेजी फ़ाइल        | कोण | दूरी            | खुले मार्ग | खींची केंद्ररेखा लंबाई           |
| ------------------ | --- | --------------- | ---------- | -------------------------------- |
| `hatch-coarse.svg` | 0°  | 10 इकाई / 5 mm  | 14         | 1,320 इकाई / 660 mm              |
| `hatch-dense.svg`  | 0°  | 5 इकाई / 2.5 mm | 28         | 2,640 इकाई / 1,320 mm            |
| `hatch-angled.svg` | 30° | 10 इकाई / 5 mm  | 20         | लगभग 1,318.564 इकाई / 659.282 mm |

हमने अपेक्षित रेखा/बहुभुज intersection स्वतंत्र निकाले और सहेजे निर्देशांक 0.000002 यूज़र इकाई टॉलरेंस से मिलाए। हर निर्यातित मार्ग अपेक्षित सिरों से मिला। हर मार्ग खुला था और कोई नमूना केंद्ररेखा बिंदु उस टॉलरेंस से बाहर छेद या बाहरी क्षेत्र में नहीं गया। तीनों सहेजे SVG ने घोषित भौतिक-आकार मैपिंग रखी।

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

## 5. मार्ग के अंतर और अनुकूलित यात्रा योजना अलग रखें

मोटे-अंतर फ़ाइल में 14 खुले मार्ग और उसके सहेजे क्रम में लगातार मार्गों के बीच 13 अंतर हैं। पेन नीचे रखकर जोड़ने से अनचाहे निशान आएँगे। ड्रॉइंग से पहले कार्यप्रवाह बदलाव सही संभाले।

स्क्रिप्ट सरल एक-दिशा क्रम रखती है: हैच ऑफ़सेट क्रम से लेती और हर खंड उसी दिशा में जाती है। हर मार्ग के अंत से अगले की शुरुआत की सीधी दूरी जोड़ने पर मोटे-अंतर फ़ाइल में लगभग 1,562.997 यूज़र इकाई मिलती हैं। घनी फ़ाइल में 27 अंतर और जोड़ दूरी लगभग 3,281.578 इकाई है।

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

प्लॉटर नियंत्रित करने वाले ऐप में फ़ाइल फिर खोलें, आकार पुष्ट करें और मार्ग प्रीव्यू तथा पेन उठाने का व्यवहार देखें। अपने सेटअप में पेन, सामग्री, दूरी, सीमा गुंजाइश और गति सेटिंग जाँचें। हमने प्लॉटर काम नहीं चलाया, मशीन कोड नहीं बनाया या Cricut Draw/Attach नहीं जाँचा।

## सामान्य ज्यामिति गलतियाँ सुधारें

| लक्षण                               | क्या जाँचें और बदलें                                                                                                               |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| हैचिंग इच्छित छेद पार करे           | भरा क्षेत्र देखें। intersection से पहले सफ़ेद ओवरले की जगह कंपाउंड ज्यामिति में असली छेद बनाएँ।                                    |
| प्रीव्यू सही लेकिन पूरी रेखाएँ बचें | क्लिप या पैटर्न निर्भरता खोजें। रेंडर सिलुएट पर निर्भर होने के बजाय सहेजे मार्ग निर्देशांक देखें।                                  |
| रेखाएँ बंद आकृतियाँ बनें            | पहला ऑपरेन्ड खुली रेखा और `trace: false` मौजूद हो यह पुष्ट करें। उदाहरण बंद या बहु-खंड परिणाम नकारता है।                           |
| इंक सीमा के बाहर जाए                | केंद्ररेखा और स्ट्रोक का फैलाव अलग मानें। उदाहरण निब त्रिज्या के लिए क्षेत्र अंदर नहीं करता; उचित खाली दूरी बनाकर असली टूल जाँचें। |
| भराव कम या सतह बहुत गीली हो         | नियंत्रित पेन/सामग्री नमूने से समायोजित करें। केवल डिजिटल दूरी कवरेज या सूखना नहीं बताती।                                          |
| फ़ाइल अनचाहे उछाल ले                | गंतव्य सॉफ़्टवेयर में क्रम और pen-up बदलाव देखें। ऑप्टिमाइज़र से पहले मूल मार्ग रखें, फिर छेद व सीमाएँ जाँचें।                     |

स्रोत केवल सपाट रास्टर सिलुएट हो तो PerfectVector का [क्लिपआर्ट से SVG कार्यप्रवाह](https://perfectvector.com/hi/clipart-to-svg) पहले बंद आर्टवर्क वापस दे सकता है। रूपरेखा और हर छेद देखें, फिर स्वीकृत ज्यामिति से हैच मार्ग बनाएँ। मौजूदा साफ़ वेक्टर सीधे हैच तैयारी में जा सकता है।

सिलुएट वेक्टर करना और हैच मार्ग बनाना अलग चरण हैं। लेख का मूल चिह्न वेक्टर ज्यामिति में बनाया है; PerfectVector परिवर्तन नमूना नहीं।

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

**क्या SVG फ़िल अपने आप पेन हैचिंग बन जाता है?**
नहीं। फ़िल रंगा रूप बताता है। प्लॉटिंग कार्यप्रवाह को हैच मार्ग या क्षेत्र से स्ट्रोक बनाने का दूसरा समर्थित तरीका चाहिए।

**हैच प्रीव्यू में अब भी छेद के पार रेखाएँ क्यों हैं?**
क्लिप पूरी रेखा के हिस्से छिपा सकता है, सहेजी ज्यामिति काटे बिना। निर्देशांक देखें और स्पष्ट मार्ग बनाने से पहले छेद वास्तविक क्षेत्र का हिस्सा करें।

**कितनी हैच दूरी लूँ?**
इच्छित स्केल पर पेन और सामग्री परीक्षण से चुनें। यह डिजिटल उदाहरण मार्ग दिखाने के लिए 5 mm और 2.5 mm लेता है; ठोस कवरेज या सार्वभौमिक पेन सेटिंग नहीं बताता।

**क्या यह एक लगातार पाथ है?**
नहीं। मोटे-अंतर परिणाम में 14 अलग खुले मार्ग हैं। छेद चार पंक्तियाँ बाँटता है और ड्रॉइंग कार्यप्रवाह मार्गों के अंतर बिना अनचाहे निशान जोड़े संभाले।

## स्रोत

1. [Paper.js PathItem intersection](https://paperjs.org/reference/pathitem/#intersect-path) — trace false का खुला-पाथ बाँटने वाला व्यवहार बताता है।
2. [SVG पैटर्न](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — दोहराया रंग स्पष्ट मार्ग ज्यामिति से अलग परिभाषित करता है।
3. [CSS मास्किंग और क्लिपिंग पाथ](https://www.w3.org/TR/css-masking-1/#ClippingPaths) — बताता है कि क्लिपिंग मूल आकृति काटे बिना रेंडर क्यों बदलती है।
4. [GRBL-Plotter हैच फ़िल](https://grbl-plotter.de/index.php?id=hatch-fill) — ऊपर रखे ऑब्जेक्ट और एक पाथ के भीतर छेद का अंतर दिखाता है।
5. [Paper.js 0.12.18 रिलीज़](https://github.com/paperjs/paper.js/releases/tag/v0.12.18) — चलने वाले उदाहरण की लाइब्रेरी रिलीज़ बताता है।

केवल रास्टर सिलुएट की संपादन योग्य सीमाएँ चाहिए तो [क्लिपआर्ट SVG उम्मीदवार तैयार करें](https://perfectvector.com/hi/clipart-to-svg), छेद देखें और वास्तविक काम जाँचने से पहले हैच मार्ग अलग बनाकर सत्यापित करें।

## Explore

- [Read the HTML article](https://perfectvector.com/hi/blog/hatch-fill-svg-pen-paths)
- [SVG की स्कोर और कट लाइनें: ज्यामिति समझें](https://perfectvector.com/hi/blog/svg-score-lines-vs-cut-lines.md)
- [काँच एचिंग स्टेंसिल: तय करें क्या हटाना है](https://perfectvector.com/hi/blog/glass-etching-stencil-polarity.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)