ครอป SVG ถาวรโดยไม่เหลือพาธที่ซ่อนอยู่

หากต้องการครอปงาน SVG ที่เติมสีอย่างถาวร ให้ตัดส่วนร่วมของแต่ละรูปทรงที่ต้องการกับพื้นที่ครอป แล้วส่งออกเฉพาะรูปทรงผลลัพธ์ เก็บไฟล์หลักที่แก้ไขได้แยกไว้ viewBox ที่เล็กลงหรือพาธคลิปเปลี่ยนสิ่งที่เห็นได้ แต่ยังเหลือพาธด้านนอกเดิมในไฟล์

ตัวอย่างของเราใช้วัตถุหลายเหลี่ยมปิดทึบที่สร้างเองสี่ชิ้นและพื้นที่ครอปสี่เหลี่ยม วัตถุหนึ่งมีช่องเปิดจริง เราครอปแยกชิ้นเพื่อเก็บสีเติมและลำดับระบาย บันทึกเป็น SVG แล้วเปิดไฟล์จริงนั้นใหม่เพื่อตรวจ นี่เป็นขั้นตอนรูปทรงที่มีขอบเขต ไม่ใช่วิธีทั่วไปสำหรับครอปทุกเอฟเฟกต์ SVG หรือสร้างไฟล์เครื่องตัดที่ทดสอบแล้ว

ตัดสินว่าต้องการซ่อนหรือลบงานภาพ

การคลิปมีประโยชน์เมื่อต้องการปรับครอปภายหลัง เอกสารคลิปของ MDN แยกผลที่เรนเดอร์จากรูปทรงพื้นฐานขององค์ประกอบ การลบความสัมพันธ์คลิปอาจเผยงานเดิมอีกครั้ง

การครอปถาวรเปลี่ยนรูปทรงที่ส่งมอบ ใช้เมื่อคนถัดไปต้องการรูปทรงที่จำกัดขอบเขตจริง พร้อมเก็บต้นฉบับไม่ครอปเป็นไฟล์หลักแยก

การลบทุกองค์ประกอบที่มองไม่เห็นเป็นอีกงานหนึ่ง รูปทรงคลิป ทรัพยากรมาสก์ หรือสัญลักษณ์ที่ถูกอ้างอาจจำเป็นแม้ไม่ได้ระบายโดยตรง คู่มือคลิปพาธและมาสก์ อธิบายความสัมพันธ์เรนเดอร์เหล่านี้ คู่มือพิกัดคลิป ครอบคลุมระบบพิกัด

เริ่มจากสีเติมปิดที่ระบุได้

คุณต้องมีต้นฉบับที่แก้ไขได้ พื้นที่ครอปที่กำหนด และวิธีตรวจ SVG ที่บันทึก ตัวอย่างนี้รัน Paper.js 0.12.18 ในเบราว์เซอร์ จัดการสีเติมหลายเหลี่ยมทึบเต็มที่โดยไม่มีเส้นขอบ ตัวถูกดำเนินการเป็นวัตถุ Path หรือ CompoundPath ไม่ใช่กลุ่มนำเข้าทั่วไป

ต้นฉบับมีกรอบเขียวน้ำทะเลพร้อมช่องเปิดสี่เหลี่ยม สามเหลี่ยมส้ม ข้าวหลามตัดม่วง และวัตถุเหลืองเล็กที่อยู่นอกครอปทั้งหมด สี่เหลี่ยมครอปเริ่มที่ (60, 40) ขนาด 160 × 120 หน่วยผู้ใช้ SVG นี่เป็นพิกัดที่สร้างไว้ ไม่ใช่ขนาดพิมพ์กายภาพ

ช่องเปิดกรอบอยู่ในพาธผสม อย่าแยกเส้นขอบเป็นวัตถุเติมสีที่ไม่เกี่ยวข้องกันเพียงเพื่อวนลูป คู่มือรู SVG อธิบายว่าปื้นขาวกับช่องเปิดโปร่งใสจริงทำงานต่างกันอย่างไร

บันทึกตัวอย่างต้นฉบับนี้เป็น source.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

ตัดส่วนร่วมแต่ละวัตถุและเก็บเฉพาะผลลัพธ์

การตัดส่วนร่วมเก็บพื้นที่ที่วัตถุกับครอปใช้ร่วมกัน เอกสาร intersect() ของ Paper.js อธิบายพาธรายการใหม่ที่มีส่วนร่วม ที่นี่ trace: true ถือทั้งสองตัวเป็นพื้นที่ ตัวเลือกนี้เกี่ยวกับรูปทรงบูลีน ไม่ได้แปลงราสเตอร์เป็นเวกเตอร์ เราใช้ insert: false เพื่อไม่ให้ไฟล์หลักนำเข้าหรือตัวช่วยครอปเข้าไปในฉากส่งออกอัตโนมัติ

สำหรับตัวอย่างในเครื่องที่ทำซ้ำได้ ติดตั้งไลบรารีเวอร์ชันที่ตรึงไว้ในโฟลเดอร์ทำงานว่าง:

npm install --save-exact paper@0.12.18

บันทึกเป็น index.html ข้าง source.svg และไฟล์ crop.js ด้านล่าง:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

บันทึกเป็น crop.js ให้บริการโฟลเดอร์ด้วยเซิร์ฟเวอร์ HTTP ในเครื่องแล้วเปิด index.html สคริปต์จะดึง SVG ที่อยู่ข้างกัน

(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 ครอบคลุมงานรวมและลบที่ต่างออกไป

วัตถุเหลืองที่อยู่นอกทั้งหมดให้ส่วนร่วมว่างจึงถูกละไว้ เกณฑ์พื้นที่เล็กเป็นเพียงตัวป้องกันสำหรับตัวอย่างนี้ ไม่ใช่การอนุญาตให้ลบรายละเอียดเล็กจากงานใดก็ได้

เราเลื่อนรูปทรงที่เก็บด้วย (-60, -40) และส่งออกสู่วิวพอร์ต 160 × 120 ที่เริ่มศูนย์ การเลื่อนเปลี่ยนจุดกำเนิดพิกัดผลลัพธ์ การตัดส่วนร่วมต่างหากที่ลบรูปทรงภายนอกที่ไม่ต้องการ การเปลี่ยนจุดกำเนิดหรือวิวพอร์ตอย่างเดียวไม่ทำเช่นนั้น เอกสารส่งออกโปรเจกต์ Paper.js อธิบายขอบเขตชัดเจนและความแม่นยำตัวเลขที่ใช้

บันทึก เปิดใหม่ และตรวจ SVG จริง

คัดลอกมาร์กอัป SVG ที่แสดงตรงตัวลง cropped.svg เปิดไฟล์ที่บันทึกอย่างอิสระ แทนการพึ่งเพียงตัวอย่างในหน่วยความจำของโปรแกรม ในตัวอย่างของเรา อีกหน้าโหลดไฟล์ที่บันทึก นำเข้าในสโคป Paper.js ใหม่ และแสดงผ่านตัวเรนเดอร์ภาพ SVG ของเบราว์เซอร์

การตรวจแยกโครงสร้างไฟล์ รูปทรง และรูปลักษณ์:

• SVG ที่ส่งออกมีองค์ประกอบพาธผลลัพธ์สามรายการ พร้อมเส้นขอบปิดสี่เส้น เพราะกรอบยังเก็บช่องเปิด
• ผลลัพธ์ควบคุมนี้ไม่มีตัวช่วยครอป ID วัตถุเดิม พาธคลิป มาสก์ ภาพราสเตอร์ หรือองค์ประกอบเอฟเฟกต์
• ทุกเส้นขอบที่เปิดใหม่ปิดและมีส่วนเส้นตรง จุดยอดทั้งหมดอยู่ในพื้นที่ 0…160 คูณ 0…120 ของผลลัพธ์ โดยใช้ค่าคลาดเคลื่อน 0.00001 หน่วยผู้ใช้
• ช่องเปิดที่ต้องการยังอยู่นอกรูปทรงเติมสีและโปร่งใสในไฟล์เรนเดอร์ พื้นที่ส้มยังอยู่เหนือเขียวน้ำทะเลตรงจุดซ้อนที่ตรวจ
• การเปรียบเทียบเรนเดอร์เบราว์เซอร์ตรวจตัวอย่างคลิปอย่างเดียวกับไฟล์ครอปที่ขนาดเดียวกัน แยกจากการตรวจรูปทรง

สำหรับพื้นที่สี่เหลี่ยมและตัวอย่างส่วนเส้นตรงนี้ การตรวจทุกจุดยอดและขอบปิดยืนยันว่าเส้นขอบที่เก็บอยู่ภายในพื้นที่ เส้นโค้งที่มีแฮนเดิลหรือครอปเว้าต้องใช้การตรวจว่าอยู่ภายในแบบอื่น จุดตัวอย่างไม่กี่จุดพิสูจน์ผลเดียวกันไม่ได้

การเปรียบเทียบภาพของเราใช้ราสเตอร์ 640 × 480 และยอมให้พิกเซลเปลี่ยน 0.5% เมื่อช่องสีต่างเกินหนึ่ง ภาพเรนเดอร์ไฟล์ที่บันทึกต่างที่ 77 จาก 307,200 พิกเซล หรือประมาณ 0.0251% จึงผ่านเกณฑ์ ไม่ได้ตรงทุกพิกเซล ความต่างช่องสีเดี่ยวสูงสุดคือ 255 นี่เป็นค่าคลาดเคลื่อนเปรียบเทียบภาพ ไม่ใช่ค่าคลาดเคลื่อนรูปทรง การลดรอยหยักใกล้ขอบกับพาธภายนอกที่ยังอยู่จริงเป็นคนละปัญหา

คำสั่งนี้ลบรูปทรงนอกครอป ไม่ลบทุกส่วนซ้อนระหว่างวัตถุสีที่เก็บ ส่วนซ้อนภายในยังอยู่ตามลำดับระบาย จุดซ้อนที่ทดสอบยืนยันสีบนสุดตามตั้งใจ การรวมทุกส่วนซ้อนที่ซ่อนอยู่เป็นอีกงานหนึ่ง

หยุดเมื่องานต้องใช้รูปแบบการแทนภาพอื่น

ตัวอย่างนี้ไม่ยืนยันการรองรับเส้นกลางเปิด เส้นขอบ ตัวดำเนินการโค้ง ไล่สี ซอฟต์มาสก์ ราสเตอร์ ฟิลเตอร์ คลิปซ้อนทั่วไป หรือสีเติมโปร่งบางที่ซ้อนกัน อย่าลบคุณสมบัติเหล่านั้นแล้วสมมติว่ารูปลักษณ์ยังคงอยู่

เส้นทางที่มีเส้นขอบกับรูปทรงเติมสีของเส้นขอบนั้นเป็นคนละรูปทรง หากงานต้องการพื้นที่เส้นขอบที่มองเห็นเป็นรูปเติมสี ให้เตรียมและตรวจสำเนาแปลงเส้นขอบในตัวแก้ไขที่เหมาะสมก่อนเลือกขั้นตอนบูลีน เก็บเส้นขอบต้นฉบับหากการแก้ไขต่อสำคัญ ไม่สามารถแทนซอฟต์มาสก์ด้วยการตัดส่วนร่วมขอบแข็งแล้วคงขอบจางทั้งหมดได้

สำหรับการแก้ครั้งเดียว ตัวแก้ไขเวกเตอร์อาจเลือกและตรวจวัตถุที่ต้องการได้ง่ายกว่า ไม่ว่าเลือกเครื่องมือใด ให้ตรวจรู สี และขอบเขตของผลที่บันทึก ความแม่นยำส่งออกและรายละเอียดเล็กมากควรได้รับความใส่ใจเป็นพิเศษก่อนใช้ต่อ

คืนเวกเตอร์ที่หายไปเมื่อจำเป็นเท่านั้น

หากต้นฉบับเป็น SVG ที่แก้ไขได้อยู่แล้ว ให้ครอปรูปทรงนั้นโดยตรง หากเหลือเพียงคลิปอาร์ตราสเตอร์ที่เหมาะสมและต้องการรูปทรงแก้ไขได้ ขั้นตอนคลิปอาร์ตของ PerfectVector สร้าง SVG ตัวเลือกก่อนได้ ตรวจเส้นขอบ ช่องเปิด และสีเติมแยกที่คืนมา ก่อนครอป การแปลงเป็นเวกเตอร์สร้างพาธจากพิกเซล ไม่ระบุขอบครอปที่ต้องการหรือตรวจผลบูลีน ตัวอย่างต้นฉบับของเราสร้างโดยตรง ไม่ได้ลากเส้น

เก็บภาพราสเตอร์เมื่อต้องใช้พื้นผิวและรูปแบบส่งมอบรองรับการครอปราสเตอร์ที่ตั้งใจ การครอปเวกเตอร์มีประโยชน์เพราะขั้นถัดไปต้องการรูปทรง ไม่ใช่เพราะทุกภาพต้องกลายเป็น SVG

ครอปให้จบโดยไม่เสียไฟล์หลัก

1. เก็บไฟล์หลักไม่ครอปและระบุวัตถุปิดเติมสีที่ต้องการ
2. กำหนดครอปในบริบทพิกัดเดียวกับวัตถุเหล่านั้น
3. ตัดส่วนร่วมแต่ละวัตถุ เก็บสไตล์และลำดับระบายที่ทดสอบ และกันตัวช่วยกับต้นฉบับออกจากฉากส่งมอบ
4. ส่งออกเฉพาะรูปทรงที่เก็บโดยเลือกขอบเขตและความแม่นยำอย่างตั้งใจ
5. เปิดไฟล์ที่บันทึกใหม่และตรวจพาธจริง ช่องเปิด รูปลักษณ์ และปลายทางที่ตั้งใจแยกกัน

การครอปที่มีขอบเขตเสร็จเมื่อไฟล์บันทึกมีรูปทรงที่ต้องการในพื้นที่และเก็บความสัมพันธ์รูและสีที่จำเป็น หากรูปทรงนอกยังอยู่ ให้ตรวจว่าส่งออกเนื้อหาโปรเจกต์เดิมหรือเปลี่ยนแค่คลิปหรือวิวพอร์ต หากช่องเปิดถูกเติม ตรวจพาธผสมและกฎสีเติมก่อนรวมวัตถุเพิ่ม

เราทำงานไฟล์บันทึกสำหรับตัวอย่างหลายเหลี่ยมต้นฉบับครบแล้ว ไม่ได้นำเข้าเครื่องตัด ทดสอบผลทางกายภาพ หรือยืนยันการรับประกันความเข้ากันได้ SVG ทั่วไป

คำถามที่พบบ่อย

คลิป SVG แล้วลบพาธภายนอกถาวรหรือไม่? การคลิปจำกัดการเรนเดอร์พร้อมเก็บรูปทรงที่อ้างอิง การครอปรูปทรงถาวรต้องใช้คำสั่งพาธที่เหมาะสมและส่งออกเฉพาะผลลัพธ์

ครอปทุกสีโดยรวมรูปทรงก่อนทำได้หรือไม่? การรวมครั้งเดียวอาจทิ้งพื้นที่สีเติมแยกที่ตั้งใจเก็บ ตัวอย่างนี้ตัดส่วนร่วมแต่ละวัตถุสีทึบแยกและคงลำดับระบายต้นฉบับ

viewBox ที่เล็กลงลบงานซ่อนหรือไม่? เปลี่ยนการแมปวิวพอร์ตและพื้นที่แสดง ไม่ได้ลบพาธต้นฉบับนอกพื้นที่ด้วยตัวเอง ตรวจรูปทรงที่บันทึกด้วย ไม่ใช่แค่ตัวอย่าง

ผลลัพธ์ใช้ได้กับทุกแอปตัดหรือไม่? การทดสอบเบราว์เซอร์นี้ไม่ยืนยันเช่นนั้น ตรวจรูปทรงและคำสั่งหลังนำเข้าในปลายทางที่ตั้งใจ แล้วทำการตรวจผลิตที่เหมาะสม

แหล่งข้อมูล

1. MDN: SVG clipPath — คลิปมีผลต่อการเรนเดอร์โดยไม่เปลี่ยนรูปทรงองค์ประกอบที่อ้าง
2. Paper.js: PathItem — ผลตัดส่วนร่วมและตัวเลือกบูลีนแบบพื้นที่
3. Paper.js: Project — นำเข้า SVG เนื้อหาโปรเจกต์ ขอบเขตส่งออก และความแม่นยำตัวเลข

ต้องการพาธจากคลิปอาร์ตที่มีเพียงบิตแมปหรือไม่? เตรียม SVG ตัวเลือก ตรวจรูและสีเติม แล้วครอปสำเนาทำงานแยกและเปิดผลที่บันทึกใหม่ก่อนส่งมอบ