Running crop…
``` Simpan ini sebagai `crop.js`. Sajikan folder melalui server HTTP lokal dan buka `index.html`; skrip mengambil berkas SVG di folder yang sama. ```js (async () => { paper.setup(document.getElementById('work')); const source = await (await fetch('source.svg')).text(); const imported = paper.project.importSVG(source, { insert: false, expandShapes: true }); const crop = new paper.Path.Rectangle({ rectangle: new paper.Rectangle(60, 40, 160, 120), insert: false }); const delivery = new paper.Group({ insert: false }); const rows = []; for (const name of ['frame', 'triangle', 'leaf', 'outside']) { const operand = imported.getItem({ name }); if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) { throw new Error('Expected filled path: ' + name); } const result = operand.intersect(crop, { insert: false, trace: true }); if (Math.abs(result.area) < 1e-8) { rows.push({ name, removed: true }); result.remove(); continue; } result.fillColor = operand.fillColor.clone(); result.fillRule = operand.fillRule; result.strokeColor = null; result.opacity = 1; result.name = 'cropped-' + name; delivery.addChild(result); rows.push({ name, result: result.className, fill: result.fillColor.toCSS(true), area: result.area }); } delivery.translate(new paper.Point(-60, -40)); paper.project.activeLayer.addChild(delivery); const output = paper.project.exportSVG({ asString: true, precision: 6, bounds: new paper.Rectangle(0, 0, 160, 120) }); document.getElementById('svg-output').textContent = output; document.getElementById('receipt').textContent = JSON.stringify({ paper: paper.version, rows, export_precision: 6, viewport: [0, 0, 160, 120] }, null, 2); document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.'; })().catch(e => { document.getElementById('status').textContent = 'FAIL: ' + e.message; }); ``` Daftar nama eksplisit mengikuti urutan pengecatan sumber ini. Setiap hasil yang dipertahankan menerima warna isian solidnya sendiri dan ditambahkan sesuai urutan tersebut. Menggabungkan seluruh ilustrasi menjadi satu siluet terlebih dahulu akan membuang wilayah warna terpisah yang ingin kami pertahankan. [Panduan Boolean Paper.js](https://perfectvector.com/id/blog/paperjs-svg-booleans) kami membahas tugas penggabungan dan pengurangan yang berbeda. Objek kuning yang sepenuhnya di luar menghasilkan irisan kosong dan tidak disertakan. Ambang area kecil hanya merupakan pengaman untuk contoh ini, bukan izin untuk menghapus detail halus pada sembarang ilustrasi. Kami mentranslasikan geometri yang dipertahankan sebesar `(-60, -40)` dan mengekspornya ke viewport `160 × 120` yang dimulai dari nol. Translasi itu mengubah titik asal koordinat keluaran. Operasi irisanlah yang menghapus geometri luar yang tidak diinginkan; mengubah titik asal atau viewport saja tidak akan melakukannya. [Referensi ekspor proyek Paper.js](https://paperjs.org/reference/project/) mendokumentasikan batas eksplisit dan presisi angka yang digunakan di sini. ## Simpan, buka kembali, dan periksa SVG sebenarnya Salin markup SVG yang ditampilkan secara persis ke `cropped.svg`. Buka berkas tersimpan itu secara terpisah, jangan hanya mengandalkan pratinjau dalam memori program. Dalam contoh kami, halaman terpisah memuat berkas tersimpan, mengimpornya ke lingkup Paper.js baru, dan menampilkannya melalui perender gambar SVG browser.  *Ilustrasi poligonal yang dibuat langsung dan pemeriksaan berkas tersimpan sebenarnya. Clip mempertahankan objek asli; ekspor hasil irisan hanya memuat geometri yang dipertahankan. Ini tidak membuktikan kompatibilitas dengan sembarang SVG atau mesin potong.* Pemeriksaan memisahkan struktur berkas, geometri, dan tampilan: * SVG ekspor memuat tiga elemen jalur hasil, dengan empat kontur tertutup karena bingkai mempertahankan bukaannya. * Objek bantu potong, ID objek asli, jalur clipping, masker, gambar raster, dan elemen efek tidak ada dalam keluaran terkontrol ini. * Setiap kontur yang dibuka kembali tertutup dan memiliki segmen lurus. Semua titik sudutnya berada dalam wilayah keluaran `0…160` kali `0…120`, dengan toleransi `0.00001` satuan pengguna. * Bukaan yang dituju tetap berada di luar geometri berisian dan transparan dalam hasil render. Wilayah jingga masih tampak di atas hijau kebiruan pada titik tumpang tindih yang diperiksa. * Perbandingan render browser memeriksa pratinjau dengan clip saja terhadap berkas terpotong pada ukuran yang sama, terpisah dari pemeriksaan geometri. Untuk wilayah persegi panjang dan contoh bersegmen lurus ini, memeriksa setiap titik sudut serta sisi penutup membuktikan bahwa kontur tersimpan tetap berada di dalam wilayah. Kurva dengan gagang kendali atau wilayah potong cekung membutuhkan pemeriksaan ketercakupan yang berbeda; beberapa titik sampel tidak membuktikan hasil yang sama. Perbandingan gambar kami memakai raster `640 × 480` dan batas yang dinyatakan sebesar 0.5% piksel berubah ketika selisih kanal lebih dari satu. Render berkas tersimpan berbeda pada 77 dari 307200 piksel, sekitar 0.0251%, sehingga lolos kriteria tersebut. Hasilnya tidak identik per piksel: selisih kanal tunggal terbesar adalah 255. Itu merupakan toleransi perbandingan visual, bukan toleransi geometri. Antialiasing di dekat tepi dan jalur luar yang benar-benar masih tersimpan adalah dua persoalan berbeda. Operasi ini menghapus geometri di luar wilayah potong. Operasi ini tidak menghapus setiap tumpang tindih di antara objek berwarna yang dipertahankan. Tumpang tindih internal tetap mengikuti urutan pengecatan; titik yang diuji mengonfirmasi warna teratas yang dimaksudkan. Meratakan seluruh tumpang tindih tersembunyi yang digambar adalah tugas terpisah. ## Berhenti ketika ilustrasi membutuhkan representasi berbeda Contoh ini tidak membuktikan dukungan untuk garis tengah terbuka, garis tepi, operand melengkung, gradien, masker lembut, gambar raster, filter, susunan clip bersarang yang arbitrer, atau warna semitransparan bertumpuk. Jangan menghapus fitur tersebut lalu menganggap tampilannya tetap terjaga. Jalur dengan garis tepi dan bentuk berisian dari kontur garis tepi itu memiliki geometri berbeda. Jika pekerjaan membutuhkan area garis tepi yang terlihat sebagai bentuk berisian, siapkan dan periksa salinan dengan garis tepi yang diubah menjadi kontur dalam editor yang sesuai sebelum memilih alur Boolean. Simpan garis tepi asli jika kemampuan edit penting. Masker lembut tidak dapat diganti dengan irisan berbatas tegas sambil mempertahankan semua tepi memudarnya. Untuk penyuntingan sekali pakai, editor vektor mungkin lebih mudah untuk memilih dan memeriksa objek yang diperlukan. Apa pun alatnya, periksa lubang, warna, dan batas hasil tersimpan. Presisi ekspor serta detail yang sangat kecil perlu perhatian khusus sebelum digunakan pada tahap berikutnya. ## Pulihkan ilustrasi vektor yang hilang hanya bila diperlukan Jika sumbernya sudah berupa SVG yang dapat diedit, potong geometrinya langsung. Jika hanya tersisa clipart raster yang sesuai dan Anda membutuhkan bentuk yang dapat diedit, [alur clipart PerfectVector](https://perfectvector.com/id/clipart-to-svg) dapat membuat kandidat SVG terlebih dahulu. Periksa kontur yang dipulihkan, bukaan, serta isian terpisah sebelum memotong. Vektorisasi membuat jalur dari piksel; vektorisasi tidak mengidentifikasi batas potong yang diinginkan atau memvalidasi hasil Boolean. Contoh asli kami dibuat langsung dan tidak dijiplak. Pertahankan ilustrasi raster ketika teksturnya diperlukan dan format penyerahan mendukung pemotongan raster yang dituju. Pemotongan vektor berguna karena tahap berikutnya membutuhkan geometri, bukan karena setiap gambar harus menjadi SVG. ## Selesaikan pemotongan tanpa kehilangan master 1. Simpan master tanpa potongan dan identifikasi objek tertutup berisian yang dituju. 2. Tentukan wilayah potong dalam konteks koordinat yang sama dengan objek tersebut. 3. Iris setiap objek, pertahankan gaya dan urutan pengecatan yang telah diuji, lalu keluarkan objek bantu dan sumber asli dari adegan penyerahan. 4. Ekspor hanya geometri yang dipertahankan dengan batas dan presisi yang dipilih secara sengaja. 5. Buka kembali berkas tersimpan dan periksa jalur sebenarnya, bukaan, tampilan, serta tujuan penggunaan secara terpisah. Pemotongan terbatas selesai ketika berkas tersimpan memuat geometri yang dituju di dalam wilayah serta mempertahankan hubungan lubang dan warna yang diperlukan. Jika geometri luar masih ada, periksa apakah Anda mengekspor isi proyek asli atau hanya mengubah clip atau viewport. Jika bukaan menjadi terisi, periksa jalur majemuk dan aturan isian sebelum menggabungkan lebih banyak objek. Kami menyelesaikan tugas berkas tersimpan untuk contoh poligonal asli. Kami tidak mengimpornya ke mesin potong, tidak menguji hasil fisik, dan tidak menetapkan jaminan kompatibilitas SVG secara umum. ## Pertanyaan umum **Apakah clipping SVG menghapus jalur luarnya secara permanen?** Clipping membatasi render sambil mempertahankan geometri yang dirujuk. Pemotongan geometri permanen membutuhkan operasi jalur yang sesuai dan ekspor yang hanya memuat hasilnya. **Bisakah saya memotong semua warna dengan menggabungkan bentuk terlebih dahulu?** Satu operasi penggabungan dapat membuang wilayah isian terpisah yang ingin dipertahankan. Contoh ini mengiris setiap objek berisian solid secara terpisah dan mempertahankan urutan pengecatan sumber. **Apakah viewBox yang lebih kecil menghapus ilustrasi tersembunyi?** Itu mengubah pemetaan viewport dan wilayah yang ditampilkan. Perubahan tersebut tidak dengan sendirinya menghapus jalur sumber di luar wilayah. Periksa geometri tersimpan selain pratinjaunya. **Apakah hasilnya berfungsi dalam setiap aplikasi pemotongan?** Pengujian browser ini tidak membuktikannya. Periksa geometri dan operasi hasil impor di tujuan yang dimaksud, lalu lakukan pemeriksaan produksi yang sesuai. ## Sumber 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — Clipping memengaruhi render tanpa mengubah geometri elemen yang dirujuk. 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — Hasil irisan dan opsi Boolean berbasis area. 3. [Paper.js: Project](https://paperjs.org/reference/project/) — Impor SVG, isi proyek, batas ekspor, dan presisi angka. *** Butuh jalur dari sumber clipart yang hanya tersedia sebagai bitmap? [Siapkan kandidat SVG](https://perfectvector.com/id/clipart-to-svg), periksa lubang dan isiannya, lalu potong salinan kerja terpisah dan buka kembali hasil tersimpan sebelum diserahkan. ## Explore - [Read the HTML article](https://perfectvector.com/id/blog/permanent-crop-svg) - [SVG feComposite: Bandingkan Gambar in, out, dan xor](https://perfectvector.com/id/blog/svg-composite-artwork.md) - [z-index SVG Tidak Bekerja? Perbaiki Urutan Path](https://perfectvector.com/id/blog/svg-z-index-order.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)