Running crop…
``` บันทึกเป็น `crop.js` ให้บริการโฟลเดอร์ด้วยเซิร์ฟเวอร์ HTTP ในเครื่องแล้วเปิด `index.html` สคริปต์จะดึง SVG ที่อยู่ข้างกัน ```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; }); ``` รายการชื่อที่ระบุชัดทำตามลำดับระบายของต้นฉบับ แต่ละผลลัพธ์ที่เก็บได้รับสีเติมทึบของตัวเองและเพิ่มตามลำดับนั้น การรวมงานทั้งหมดเป็นเงารูปร่างเดียวก่อนจะทิ้งพื้นที่สีแยกที่ต้องการเก็บ [คู่มือบูลีน Paper.js](https://perfectvector.com/th/blog/paperjs-svg-booleans) ครอบคลุมงานรวมและลบที่ต่างออกไป วัตถุเหลืองที่อยู่นอกทั้งหมดให้ส่วนร่วมว่างจึงถูกละไว้ เกณฑ์พื้นที่เล็กเป็นเพียงตัวป้องกันสำหรับตัวอย่างนี้ ไม่ใช่การอนุญาตให้ลบรายละเอียดเล็กจากงานใดก็ได้ เราเลื่อนรูปทรงที่เก็บด้วย `(-60, -40)` และส่งออกสู่วิวพอร์ต `160 × 120` ที่เริ่มศูนย์ การเลื่อนเปลี่ยนจุดกำเนิดพิกัดผลลัพธ์ การตัดส่วนร่วมต่างหากที่ลบรูปทรงภายนอกที่ไม่ต้องการ การเปลี่ยนจุดกำเนิดหรือวิวพอร์ตอย่างเดียวไม่ทำเช่นนั้น [เอกสารส่งออกโปรเจกต์ Paper.js](https://paperjs.org/reference/project/) อธิบายขอบเขตชัดเจนและความแม่นยำตัวเลขที่ใช้ ## บันทึก เปิดใหม่ และตรวจ SVG จริง คัดลอกมาร์กอัป SVG ที่แสดงตรงตัวลง `cropped.svg` เปิดไฟล์ที่บันทึกอย่างอิสระ แทนการพึ่งเพียงตัวอย่างในหน่วยความจำของโปรแกรม ในตัวอย่างของเรา อีกหน้าโหลดไฟล์ที่บันทึก นำเข้าในสโคป Paper.js ใหม่ และแสดงผ่านตัวเรนเดอร์ภาพ SVG ของเบราว์เซอร์  *งานหลายเหลี่ยมที่สร้างเองและการตรวจไฟล์บันทึกจริง คลิปเก็บวัตถุเดิม ส่วนส่งออกตัดส่วนร่วมมีเพียงรูปทรงที่เก็บ ไม่ได้แสดงความเข้ากันได้กับ SVG ใดก็ได้หรือเครื่องตัด* การตรวจแยกโครงสร้างไฟล์ รูปทรง และรูปลักษณ์: * SVG ที่ส่งออกมีองค์ประกอบพาธผลลัพธ์สามรายการ พร้อมเส้นขอบปิดสี่เส้น เพราะกรอบยังเก็บช่องเปิด * ผลลัพธ์ควบคุมนี้ไม่มีตัวช่วยครอป ID วัตถุเดิม พาธคลิป มาสก์ ภาพราสเตอร์ หรือองค์ประกอบเอฟเฟกต์ * ทุกเส้นขอบที่เปิดใหม่ปิดและมีส่วนเส้นตรง จุดยอดทั้งหมดอยู่ในพื้นที่ `0…160` คูณ `0…120` ของผลลัพธ์ โดยใช้ค่าคลาดเคลื่อน `0.00001` หน่วยผู้ใช้ * ช่องเปิดที่ต้องการยังอยู่นอกรูปทรงเติมสีและโปร่งใสในไฟล์เรนเดอร์ พื้นที่ส้มยังอยู่เหนือเขียวน้ำทะเลตรงจุดซ้อนที่ตรวจ * การเปรียบเทียบเรนเดอร์เบราว์เซอร์ตรวจตัวอย่างคลิปอย่างเดียวกับไฟล์ครอปที่ขนาดเดียวกัน แยกจากการตรวจรูปทรง สำหรับพื้นที่สี่เหลี่ยมและตัวอย่างส่วนเส้นตรงนี้ การตรวจทุกจุดยอดและขอบปิดยืนยันว่าเส้นขอบที่เก็บอยู่ภายในพื้นที่ เส้นโค้งที่มีแฮนเดิลหรือครอปเว้าต้องใช้การตรวจว่าอยู่ภายในแบบอื่น จุดตัวอย่างไม่กี่จุดพิสูจน์ผลเดียวกันไม่ได้ การเปรียบเทียบภาพของเราใช้ราสเตอร์ `640 × 480` และยอมให้พิกเซลเปลี่ยน 0.5% เมื่อช่องสีต่างเกินหนึ่ง ภาพเรนเดอร์ไฟล์ที่บันทึกต่างที่ 77 จาก 307,200 พิกเซล หรือประมาณ 0.0251% จึงผ่านเกณฑ์ ไม่ได้ตรงทุกพิกเซล ความต่างช่องสีเดี่ยวสูงสุดคือ 255 นี่เป็นค่าคลาดเคลื่อนเปรียบเทียบภาพ ไม่ใช่ค่าคลาดเคลื่อนรูปทรง การลดรอยหยักใกล้ขอบกับพาธภายนอกที่ยังอยู่จริงเป็นคนละปัญหา คำสั่งนี้ลบรูปทรงนอกครอป ไม่ลบทุกส่วนซ้อนระหว่างวัตถุสีที่เก็บ ส่วนซ้อนภายในยังอยู่ตามลำดับระบาย จุดซ้อนที่ทดสอบยืนยันสีบนสุดตามตั้งใจ การรวมทุกส่วนซ้อนที่ซ่อนอยู่เป็นอีกงานหนึ่ง ## หยุดเมื่องานต้องใช้รูปแบบการแทนภาพอื่น ตัวอย่างนี้ไม่ยืนยันการรองรับเส้นกลางเปิด เส้นขอบ ตัวดำเนินการโค้ง ไล่สี ซอฟต์มาสก์ ราสเตอร์ ฟิลเตอร์ คลิปซ้อนทั่วไป หรือสีเติมโปร่งบางที่ซ้อนกัน อย่าลบคุณสมบัติเหล่านั้นแล้วสมมติว่ารูปลักษณ์ยังคงอยู่ เส้นทางที่มีเส้นขอบกับรูปทรงเติมสีของเส้นขอบนั้นเป็นคนละรูปทรง หากงานต้องการพื้นที่เส้นขอบที่มองเห็นเป็นรูปเติมสี ให้เตรียมและตรวจสำเนาแปลงเส้นขอบในตัวแก้ไขที่เหมาะสมก่อนเลือกขั้นตอนบูลีน เก็บเส้นขอบต้นฉบับหากการแก้ไขต่อสำคัญ ไม่สามารถแทนซอฟต์มาสก์ด้วยการตัดส่วนร่วมขอบแข็งแล้วคงขอบจางทั้งหมดได้ สำหรับการแก้ครั้งเดียว ตัวแก้ไขเวกเตอร์อาจเลือกและตรวจวัตถุที่ต้องการได้ง่ายกว่า ไม่ว่าเลือกเครื่องมือใด ให้ตรวจรู สี และขอบเขตของผลที่บันทึก ความแม่นยำส่งออกและรายละเอียดเล็กมากควรได้รับความใส่ใจเป็นพิเศษก่อนใช้ต่อ ## คืนเวกเตอร์ที่หายไปเมื่อจำเป็นเท่านั้น หากต้นฉบับเป็น SVG ที่แก้ไขได้อยู่แล้ว ให้ครอปรูปทรงนั้นโดยตรง หากเหลือเพียงคลิปอาร์ตราสเตอร์ที่เหมาะสมและต้องการรูปทรงแก้ไขได้ [ขั้นตอนคลิปอาร์ตของ PerfectVector](https://perfectvector.com/th/clipart-to-svg) สร้าง SVG ตัวเลือกก่อนได้ ตรวจเส้นขอบ ช่องเปิด และสีเติมแยกที่คืนมา ก่อนครอป การแปลงเป็นเวกเตอร์สร้างพาธจากพิกเซล ไม่ระบุขอบครอปที่ต้องการหรือตรวจผลบูลีน ตัวอย่างต้นฉบับของเราสร้างโดยตรง ไม่ได้ลากเส้น เก็บภาพราสเตอร์เมื่อต้องใช้พื้นผิวและรูปแบบส่งมอบรองรับการครอปราสเตอร์ที่ตั้งใจ การครอปเวกเตอร์มีประโยชน์เพราะขั้นถัดไปต้องการรูปทรง ไม่ใช่เพราะทุกภาพต้องกลายเป็น SVG ## ครอปให้จบโดยไม่เสียไฟล์หลัก 1. เก็บไฟล์หลักไม่ครอปและระบุวัตถุปิดเติมสีที่ต้องการ 2. กำหนดครอปในบริบทพิกัดเดียวกับวัตถุเหล่านั้น 3. ตัดส่วนร่วมแต่ละวัตถุ เก็บสไตล์และลำดับระบายที่ทดสอบ และกันตัวช่วยกับต้นฉบับออกจากฉากส่งมอบ 4. ส่งออกเฉพาะรูปทรงที่เก็บโดยเลือกขอบเขตและความแม่นยำอย่างตั้งใจ 5. เปิดไฟล์ที่บันทึกใหม่และตรวจพาธจริง ช่องเปิด รูปลักษณ์ และปลายทางที่ตั้งใจแยกกัน การครอปที่มีขอบเขตเสร็จเมื่อไฟล์บันทึกมีรูปทรงที่ต้องการในพื้นที่และเก็บความสัมพันธ์รูและสีที่จำเป็น หากรูปทรงนอกยังอยู่ ให้ตรวจว่าส่งออกเนื้อหาโปรเจกต์เดิมหรือเปลี่ยนแค่คลิปหรือวิวพอร์ต หากช่องเปิดถูกเติม ตรวจพาธผสมและกฎสีเติมก่อนรวมวัตถุเพิ่ม เราทำงานไฟล์บันทึกสำหรับตัวอย่างหลายเหลี่ยมต้นฉบับครบแล้ว ไม่ได้นำเข้าเครื่องตัด ทดสอบผลทางกายภาพ หรือยืนยันการรับประกันความเข้ากันได้ SVG ทั่วไป ## คำถามที่พบบ่อย **คลิป SVG แล้วลบพาธภายนอกถาวรหรือไม่?** การคลิปจำกัดการเรนเดอร์พร้อมเก็บรูปทรงที่อ้างอิง การครอปรูปทรงถาวรต้องใช้คำสั่งพาธที่เหมาะสมและส่งออกเฉพาะผลลัพธ์ **ครอปทุกสีโดยรวมรูปทรงก่อนทำได้หรือไม่?** การรวมครั้งเดียวอาจทิ้งพื้นที่สีเติมแยกที่ตั้งใจเก็บ ตัวอย่างนี้ตัดส่วนร่วมแต่ละวัตถุสีทึบแยกและคงลำดับระบายต้นฉบับ **viewBox ที่เล็กลงลบงานซ่อนหรือไม่?** เปลี่ยนการแมปวิวพอร์ตและพื้นที่แสดง ไม่ได้ลบพาธต้นฉบับนอกพื้นที่ด้วยตัวเอง ตรวจรูปทรงที่บันทึกด้วย ไม่ใช่แค่ตัวอย่าง **ผลลัพธ์ใช้ได้กับทุกแอปตัดหรือไม่?** การทดสอบเบราว์เซอร์นี้ไม่ยืนยันเช่นนั้น ตรวจรูปทรงและคำสั่งหลังนำเข้าในปลายทางที่ตั้งใจ แล้วทำการตรวจผลิตที่เหมาะสม ## แหล่งข้อมูล 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — คลิปมีผลต่อการเรนเดอร์โดยไม่เปลี่ยนรูปทรงองค์ประกอบที่อ้าง 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — ผลตัดส่วนร่วมและตัวเลือกบูลีนแบบพื้นที่ 3. [Paper.js: Project](https://paperjs.org/reference/project/) — นำเข้า SVG เนื้อหาโปรเจกต์ ขอบเขตส่งออก และความแม่นยำตัวเลข *** ต้องการพาธจากคลิปอาร์ตที่มีเพียงบิตแมปหรือไม่? [เตรียม SVG ตัวเลือก](https://perfectvector.com/th/clipart-to-svg) ตรวจรูและสีเติม แล้วครอปสำเนาทำงานแยกและเปิดผลที่บันทึกใหม่ก่อนส่งมอบ ## Explore - [Read the HTML article](https://perfectvector.com/th/blog/permanent-crop-svg) - [SVG feComposite: เทียบภาพด้วย in, out และ xor](https://perfectvector.com/th/blog/svg-composite-artwork.md) - [SVG z-index ไม่ทำงาน? แก้ลำดับซ้อนพาธ](https://perfectvector.com/th/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)