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

# Arsiran SVG: Buat Path Nyata untuk Plotter Pena

> Buat path arsiran terbuka nyata dari area SVG tertutup. Ulangi pemeriksaan lubang, jarak, sudut, dan berkas tersimpan dengan contoh Paper.js orisinal.

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

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

Untuk mengarsir SVG bagi plotter pena, buat garis terbuka di dalam area tertutup yang dimaksud, belah pada batasnya, lalu ekspor segmen tersisa sebagai geometri. Periksa berkas tersimpan untuk rute yang melintasi lubang dan keluar bentuk sebelum menyiapkan pekerjaan mesin.

Fill berwarna atau pratinjau bergaris tidak dengan sendirinya menyediakan rute gambar itu. Tutorial ini membuat lambang segi lima orisinal dengan lubang persegi panjang, memakai Paper.js untuk mengiriskan garis terbuka dengan area tersebut, lalu membuka kembali SVG tersimpan untuk diperiksa. Pemeriksaan ini membuktikan geometri garis tengah digital, bukan keberhasilan plotting fisik.

## 1. Pilih area untuk diarsir, bukan garis untuk dipulihkan

Anda membutuhkan area tertutup dengan lubang sebagai bagian geometrinya. Persegi panjang putih yang diletakkan di atas bentuk solid dapat terlihat seperti lubang, tetapi area di bawahnya tetap utuh. [Dokumentasi hatch-fill GRBL-Plotter](https://grbl-plotter.de/index.php?id=hatch-fill) menunjukkan perbedaan ini melalui objek bertumpang tindih versus bukaan dalam satu path. Kami tidak menjalankan GRBL-Plotter di sini.

Jika ingin memulihkan satu stroke di tengah garis raster tebal, gunakan [panduan SVG satu garis](https://perfectvector.com/id/blog/drawing-to-single-line-svg). Arsiran membuat banyak stroke melintasi area; tidak memulihkan garis tengah pena asli.

Simpan salinan desain berisi. Contoh ini sengaja menghasilkan rute arsiran tanpa menambah lintasan outline. Jika Anda juga ingin menggambar batas luar atau batas lubang, siapkan keduanya sebagai rute terpisah yang disengaja.

## 2. Bedakan tampilan terklip dari path yang dipangkas

[Pattern](https://www.w3.org/TR/SVG2/pservers.html#Patterns) SVG melukis ubin berulang. [Clipping path](https://www.w3.org/TR/css-masking-1/#ClippingPaths) membatasi area render tanpa mengubah geometri dasarnya. Keduanya dapat membuat gambar layar yang berguna, tetapi aplikasi tetap membutuhkan metode untuk mengubah tampilan itu menjadi rute pena.

Kontrol hanya-klip kami menyimpan sepuluh garis horizontal, masing-masing sepanjang 200 unit pengguna. Klip menyembunyikan bagian luar dan bukaan persegi panjangnya. Panjang garis tersimpan tetap berjumlah 2.000 unit.

Ekspor renggang yang dipangkas berisi 14 path terbuka terpisah dengan total 1.320 unit. Tidak ada clipping path, pattern, mask, gambar tertanam, atau simbol yang dipakai ulang. Empat baris arsiran terbelah menjadi dua path di sekitar lubang. Perbedaan ini dapat diperiksa dalam SVG tersimpan, meskipun pratinjau terklip dan terpangkas tampak serupa.

![SVG sebenarnya yang dibuka kembali, membandingkan pratinjau arsiran hanya-klip dengan path arsiran terbuka eksplisit pada dua jarak dan sudut 30 derajat](https://perfectvector.com/blog/hatch-fill-svg-pen-paths/hatch-routes.webp)

*Fixture digital orisinal dan ekspor Paper.js sebenarnya. Lubang tetap terbuka dalam ketiga berkas rute. Pemeriksaan membahas garis tengah; tidak dilakukan pengujian plotter atau pena fisik.*

[Panduan unit pola SVG](https://perfectvector.com/id/blog/svg-pattern-units) membahas pewarnaan berulang jika itulah keluaran yang diinginkan. Di sini keluaran yang dibutuhkan adalah geometri terbuka eksplisit.

## 3. Jalankan contoh Paper.js lengkap

Gunakan browser, editor teks, dan build Paper.js 0.12.18 lengkap dari [rilis resmi](https://github.com/paperjs/paper.js/releases/tag/v0.12.18). Taruh `paper-full.min.js` dalam folder `library`. Simpan HTML ini sebagai `generate.html` dan JavaScript berikut sebagai `hatch.js` di sebelah folder itu. Lambang orisinal disertakan dalam kode.

```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.';
```

Buka `generate.html` di browser. Kami menjalankannya dengan Paper.js 0.12.18 di Chromium 155. Setiap hasil menampilkan pratinjau sekaligus markup SVG persisnya. Salin tiga string SVG lengkap ke `hatch-coarse.svg`, `hatch-dense.svg`, dan `hatch-angled.svg`, lalu buka berkas tersimpan itu secara terpisah.

Pemanggilan pentingnya adalah `line.intersect(area, { trace: false, insert: false })`. Paper.js mendokumentasikan [`trace: false`](https://paperjs.org/reference/pathitem/#intersect-path) sebagai pembelahan path pertama pada titik irisan dan pemertahanan kurvanya di dalam area path kedua. Ini mempertahankan segmen arsiran terbuka. Mode penelusuran area default menjawab pertanyaan Boolean berbeda; [panduan bentuk berisi Paper.js](https://perfectvector.com/id/blog/paperjs-svg-booleans) membahas alur itu.

Fungsi mengatur `fillColor` ke null dan memberi setiap rute stroke. Fungsi juga memeriksa hasil terbuka dengan dua titik sebelum ekspor. Area tertutup tetap menjadi pembantu konstruksi dan tidak disertakan dalam grup penyerahan.

## 4. Periksa jarak, sudut, dan skala fisik bersama-sama

Ketiga ekspor mendeklarasikan `width="100mm"`, `height="70mm"`, dan `viewBox="0 0 200 140"`. Ini memetakan satu unit pengguna ke 0,5 mm dalam SVG. Jadi jarak arsiran 10 unit berarti 5 mm; 5 unit berarti 2,5 mm.

Jarak contoh yang sengaja lebar ini memudahkan pemeriksaan rute individual. Ini bukan rekomendasi untuk cakupan tinta solid. Stroke layar selebar satu unit pengguna, tetapi tampilannya tidak mengukur tanda pena asli pada suatu bahan.

Loop offset menetapkan fase arsiran pada setengah jarak. Mengubah fase dapat mengubah fitur batas yang ditemui garis. Pada sudut positif 30°, arahnya menurun ke kanan dalam sistem koordinat SVG ini. Jarak diukur tegak lurus garis paralel, bukan sebagai pemisahan vertikalnya di layar.

| Berkas tersimpan   | Sudut | Jarak           | Rute terbuka | Panjang garis tengah tergambar      |
| ------------------ | ----- | --------------- | ------------ | ----------------------------------- |
| `hatch-coarse.svg` | 0°    | 10 unit / 5 mm  | 14           | 1.320 unit / 660 mm                 |
| `hatch-dense.svg`  | 0°    | 5 unit / 2,5 mm | 28           | 2.640 unit / 1.320 mm               |
| `hatch-angled.svg` | 30°   | 10 unit / 5 mm  | 20           | Sekitar 1.318,564 unit / 659,282 mm |

Kami menghitung irisan garis/poligon yang diharapkan secara independen, lalu membandingkan koordinat tersimpan dengan toleransi 0,000002 unit pengguna. Setiap rute hasil ekspor cocok dengan titik ujung yang diharapkan. Setiap rute terbuka, dan tidak ada titik sampel garis tengah melintasi lubang atau bagian luar melebihi toleransi itu. Ketiga SVG tersimpan mempertahankan pemetaan ukuran fisik yang dinyatakan.

Untuk bentuk lain, periksa rute hasil ekspor sebenarnya, bukan menganggap jumlah fixture ini akan tetap berlaku. Kurva, celah sangat kecil, perpotongan diri, grup yang ditransformasikan, dan dokumen SVG impor sembarang berada di luar cakupan pengujian contoh ini.

## 5. Pisahkan celah rute dari rencana perpindahan optimal

Berkas renggang memiliki 14 rute terbuka dan 13 celah antarrute berurutan dalam urutan serialisasinya. Menghubungkan celah itu dengan pena turun akan menambah tanda yang tidak diinginkan. Alur plotting Anda harus menangani transisi sesuai maksud sebelum menggambar.

Skrip mempertahankan urutan satu arah sederhana: mengunjungi offset arsiran secara berurutan dan mengikuti setiap segmen ke arah yang sama. Menjumlahkan jarak lurus dari ujung setiap rute ke awal berikutnya menghasilkan sekitar 1.562,997 unit pengguna untuk berkas renggang. Berkas lebih rapat memiliki 27 celah dengan total penghubung sekitar 3.281,578 unit.

Jumlah itu tidak mencakup pendekatan awal dan kembali akhir. Itu konsekuensi geometris urutan ini, bukan perpindahan mesin terukur, perkiraan waktu, atau rencana optimal. Aplikasi plotting dapat membalik atau mengurutkan ulang rute. Mengurangi jarak menjadi separuh menggandakan panjang gambar dan jumlah rute fixture ini; tidak menetapkan penggandaan waktu pekerjaan secara universal.

Buka kembali berkas dalam aplikasi yang akan mengendalikan plotter, pastikan ukurannya, lalu periksa pratinjau rute dan perilaku pengangkatan pena. Uji pena, bahan, jarak, kelonggaran batas, dan pengaturan gerak pada perangkat Anda. Kami tidak menjalankan pekerjaan plotter, membuat kode mesin, atau menguji Cricut Draw/Attach.

## Atasi kegagalan geometri yang umum

| Gejala                                       | Yang perlu diperiksa dan diubah                                                                                                                                    |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Arsiran melintasi lubang yang diinginkan     | Periksa area berisi. Ganti overlay putih dengan bukaan nyata pada geometri gabungan sebelum pengirisan.                                                            |
| Pratinjau benar tetapi garis penuh tetap ada | Cari ketergantungan pada klip atau pola. Periksa koordinat rute tersimpan, bukan hanya mengandalkan siluet hasil render.                                           |
| Garis menjadi bentuk tertutup                | Pastikan operand pertama adalah garis terbuka dan `trace: false` tersedia. Contoh ini menolak hasil tertutup atau multisegmen.                                     |
| Tinta melampaui batas                        | Bedakan garis tengah dari jejak stroke. Contoh ini tidak menggeser area ke dalam sesuai radius ujung pena; siapkan kelonggaran yang tepat dan uji alat sebenarnya. |
| Isian renggang atau permukaan terlalu basah  | Sesuaikan memakai sampel pena/bahan yang terkontrol. Jarak digital saja tidak menetapkan cakupan atau perilaku pengeringan.                                        |
| Berkas melakukan lompatan tak terduga        | Periksa urutan dan transisi pena terangkat dalam perangkat lunak tujuan. Simpan rute asli sebelum memakai pengoptimal, lalu periksa ulang lubang dan batas.        |

Jika sumber hanya siluet raster datar, [alur clipart ke SVG](https://perfectvector.com/id/clipart-to-svg) PerfectVector dapat membantu memulihkan desain tertutup terlebih dahulu. Periksa outline serta setiap bukaan, lalu buat rute arsiran dari geometri yang diterima. Desain vektor bersih yang sudah ada dapat langsung masuk persiapan arsiran.

Vektorisasi siluet dan pembuatan rute arsiran adalah langkah terpisah. Lambang orisinal artikel ini dibuat sebagai geometri vektor; bukan sampel konversi PerfectVector.

## Tanya jawab

**Apakah fill SVG otomatis menjadi arsiran pena?**
Tidak. Fill menjelaskan tampilan berwarna. Alur plotting membutuhkan rute arsiran atau cara lain yang didukung untuk membuat stroke gambar dari area itu.

**Mengapa pratinjau arsiran masih berisi garis melalui lubang?**
Klip dapat menyembunyikan bagian garis penuh tanpa memangkas geometri tersimpannya. Periksa koordinat tersimpan dan jadikan lubang bagian dari area sebenarnya sebelum menghasilkan rute eksplisit.

**Berapa jarak arsiran yang sebaiknya dipakai?**
Pilih melalui pengujian pena dan bahan pada skala tujuan. Contoh digital ini memakai jarak 5 mm dan 2,5 mm agar rute terlihat; tidak menetapkan cakupan solid atau pengaturan pena universal.

**Apakah ini satu path kontinu?**
Tidak. Hasil renggang berisi 14 rute terbuka terpisah. Lubangnya membelah empat baris, dan alur gambar harus menangani celah antarrute tanpa menambah tanda yang tidak diinginkan.

## Sumber

1. [Irisan PathItem Paper.js](https://paperjs.org/reference/pathitem/#intersect-path) — Mendokumentasikan pembelahan path terbuka dengan trace false.
2. [Pola SVG](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — Mendefinisikan pewarnaan berulang terpisah dari geometri rute eksplisit.
3. [Masking dan clipping path CSS](https://www.w3.org/TR/css-masking-1/#ClippingPaths) — Menjelaskan alasan kliping mengubah render tanpa memangkas bentuk dasarnya.
4. [Hatch fill GRBL-Plotter](https://grbl-plotter.de/index.php?id=hatch-fill) — Menunjukkan perbedaan objek bertumpuk dengan lubang dalam satu path.
5. [Rilis Paper.js 0.12.18](https://github.com/paperjs/paper.js/releases/tag/v0.12.18) — Mengidentifikasi versi pustaka yang dipakai contoh yang dapat dijalankan.

Jika siluet yang hanya tersedia sebagai raster membutuhkan batas yang dapat diedit, [siapkan kandidat SVG clipart](https://perfectvector.com/id/clipart-to-svg), periksa lubangnya, lalu buat dan verifikasi rute arsiran secara terpisah sebelum menguji pekerjaan fisik.

## Explore

- [Read the HTML article](https://perfectvector.com/id/blog/hatch-fill-svg-pen-paths)
- [Garis Tekuk dan Garis Potong SVG: Baca Geometrinya](https://perfectvector.com/id/blog/svg-score-lines-vs-cut-lines.md)
- [Stensil Etsa Kaca: Pilih Bagian yang Dilepas](https://perfectvector.com/id/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)