Running crop…
``` Lưu phần này thành `crop.js`. Phục vụ thư mục bằng máy chủ HTTP cục bộ và mở `index.html`; tập lệnh lấy tệp SVG nằm cạnh. ```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; }); ``` Danh sách tên tường minh theo thứ tự tô của nguồn này. Mỗi kết quả giữ lại nhận màu tô đặc riêng và được thêm theo thứ tự đó. Gộp toàn bộ hình thành một bóng hình trước sẽ làm mất các vùng màu riêng mà chúng tôi muốn giữ. [Hướng dẫn Boolean Paper.js](https://perfectvector.com/vi/blog/paperjs-svg-booleans) của chúng tôi trình bày nhiệm vụ hợp và trừ khác đó. Đối tượng vàng hoàn toàn bên ngoài cho phần giao rỗng và bị loại. Ngưỡng diện tích nhỏ chỉ là biện pháp bảo vệ cho mẫu này, không phải cho phép xóa chi tiết mảnh từ mọi hình thiết kế. Chúng tôi tịnh tiến hình học giữ lại theo `(-60, -40)` rồi xuất vào khung nhìn `160 × 120` bắt đầu từ không. Phép tịnh tiến đó thay đổi gốc tọa độ đầu ra. Chính phép giao loại bỏ hình học ngoài không mong muốn; chỉ đổi gốc hoặc khung nhìn không làm được việc đó. [Tài liệu xuất dự án của Paper.js](https://paperjs.org/reference/project/) mô tả biên tường minh và độ chính xác số dùng ở đây. ## Lưu, mở lại và kiểm tra SVG thực tế Sao chép nguyên mã SVG đang hiển thị vào `cropped.svg`. Mở tệp đã lưu độc lập thay vì chỉ dựa vào hình xem trước trong bộ nhớ chương trình. Trong mẫu của chúng tôi, trang riêng tải tệp đã lưu, nhập vào phạm vi Paper.js mới và hiển thị tệp qua bộ kết xuất ảnh SVG của trình duyệt.  *Hình đa giác gốc do chúng tôi tạo và kiểm tra tệp đã lưu thực tế. Clipping giữ các đối tượng gốc; bản xuất phép giao chỉ chứa hình học giữ lại. Điều này không chứng minh tính tương thích với mọi SVG hay máy cắt.* Các kiểm tra tách riêng cấu trúc tệp, hình học và hình thức: * SVG xuất ra chứa ba phần tử đường dẫn kết quả, với bốn đường bao kín vì khung giữ khoảng mở. * Hình hỗ trợ cắt, ID đối tượng gốc, đường clipping, mặt nạ, ảnh raster và phần tử hiệu ứng không có trong đầu ra được kiểm soát này. * Mọi đường bao mở lại đều kín và có đoạn thẳng. Tất cả đỉnh nằm trong vùng đầu ra `0…160` theo `0…120`, với dung sai `0.00001` đơn vị người dùng. * Khoảng mở dự định vẫn nằm ngoài hình học được tô và trong suốt trong tệp kết xuất. Vùng cam vẫn hiện trên xanh ngọc tại điểm chồng lấp được kiểm tra. * So sánh kết xuất trình duyệt đối chiếu hình xem trước chỉ clipping với tệp đã cắt ở cùng kích thước, riêng với kiểm tra hình học. Với vùng chữ nhật và mẫu đoạn thẳng này, kiểm tra mọi đỉnh và cạnh khép kín xác nhận các đường bao lưu nằm trong vùng. Đường cong có tay nắm hoặc vùng cắt lõm cần kiểm tra bao chứa khác; một vài điểm lấy mẫu không chứng minh được kết quả tương tự. So sánh ảnh của chúng tôi dùng raster `640 × 480` và mức cho phép đã nêu là 0,5% pixel thay đổi khi một kênh khác hơn một. Hình kết xuất tệp đã lưu khác tại 77 trong 307.200 pixel, khoảng 0,0251%, nên đạt tiêu chí đó. Nó không giống từng pixel: chênh lệch lớn nhất của một kênh là 255. Đây là dung sai so sánh thị giác, không phải dung sai hình học. Khử răng cưa gần biên và đường dẫn ngoài thực sự còn lại là hai vấn đề khác nhau. Thao tác này loại bỏ hình học ngoài vùng cắt. Nó không loại mọi chồng lấp giữa các đối tượng màu giữ lại. Các phần chồng bên trong vẫn theo thứ tự tô; điểm chồng thử nghiệm xác nhận màu trên cùng đúng ý định. Làm phẳng mọi vùng tô chồng bị ẩn là nhiệm vụ riêng. ## Dừng khi hình cần dạng biểu diễn khác Ví dụ này không xác lập hỗ trợ đường tâm mở, nét, toán hạng cong, gradient, mặt nạ mềm, ảnh raster, bộ lọc, chồng clipping lồng nhau tùy ý hoặc các màu tô bán trong suốt chồng nhau. Đừng loại các tính năng đó rồi cho rằng hình thức được giữ nguyên. Tuyến có nét và đường bao được tô của nét đó là hình học khác nhau. Nếu công việc cần diện tích nét nhìn thấy làm hình được tô, hãy chuẩn bị và kiểm tra bản sao đã chuyển nét thành đường bao trong trình biên tập phù hợp trước khi chọn quy trình Boolean. Giữ nét gốc nếu khả năng chỉnh sửa quan trọng. Không thể thay mặt nạ mềm bằng phép giao cứng mà vẫn giữ mọi cạnh mờ dần. Khi sửa một lần, trình biên tập vector có thể là nơi dễ chọn và kiểm tra các đối tượng cần thiết hơn. Dù chọn công cụ nào, hãy kiểm tra lỗ, màu và biên của kết quả đã lưu. Độ chính xác xuất và các chi tiết rất nhỏ cần được chú ý riêng trước khi dùng ở bước sau. ## Chỉ khôi phục hình vector còn thiếu khi cần Nếu nguồn là SVG chỉnh sửa được hiện có, hãy cắt trực tiếp hình học đó. Nếu chỉ còn ảnh clipart raster phù hợp và bạn cần các hình chỉnh sửa được, [quy trình clipart của PerfectVector](https://perfectvector.com/vi/clipart-to-svg) có thể tạo phương án SVG trước. Kiểm tra các đường bao khôi phục, khoảng mở và màu tô riêng trước khi cắt. Vector hóa tạo đường dẫn từ pixel; nó không xác định biên cắt mong muốn hay xác minh kết quả Boolean. Mẫu gốc của chúng tôi được tạo trực tiếp, không đồ lại. Giữ minh họa raster khi cần chất liệu của nó và định dạng giao hỗ trợ cách cắt raster dự định. Cắt vector hữu ích vì bước tiếp theo cần hình học, không phải vì mọi ảnh đều phải trở thành SVG. ## Hoàn tất cắt mà không mất bản gốc 1. Giữ bản gốc chưa cắt và xác định các đối tượng tô kín dự định. 2. Xác định vùng cắt trong cùng ngữ cảnh tọa độ với các đối tượng đó. 3. Lấy giao từng đối tượng, giữ kiểu và thứ tự tô đã kiểm thử, đồng thời loại hình hỗ trợ cùng bản gốc khỏi cảnh giao. 4. Chỉ xuất hình học giữ lại với biên và độ chính xác được chọn có chủ đích. 5. Mở lại tệp đã lưu và kiểm tra riêng các đường dẫn, khoảng mở, hình thức thực tế cùng nơi dùng dự định. Việc cắt trong phạm vi này hoàn tất khi tệp lưu chứa hình học dự định bên trong vùng và giữ các quan hệ lỗ, màu cần thiết. Nếu hình học ngoài vẫn còn, hãy xem bạn có xuất nội dung dự án gốc hay chỉ thay clipping hoặc khung nhìn không. Nếu khoảng mở bị tô kín, kiểm tra đường dẫn phức hợp và quy tắc tô trước khi kết hợp thêm đối tượng. Chúng tôi hoàn tất nhiệm vụ tệp đã lưu cho mẫu đa giác gốc. Chúng tôi không nhập nó vào máy cắt, thử đầu ra vật lý hay xác lập bảo đảm tương thích SVG chung. ## Câu hỏi thường gặp **Clipping SVG có xóa vĩnh viễn các đường dẫn ngoài không?** Clipping giới hạn kết xuất trong khi giữ hình học được tham chiếu. Cắt hình học vĩnh viễn cần thao tác đường dẫn phù hợp và bản xuất chỉ chứa kết quả. **Tôi có thể cắt mọi màu bằng cách gộp hình trước không?** Một phép hợp duy nhất có thể làm mất các vùng tô riêng bạn muốn giữ. Ví dụ này lấy giao từng đối tượng tô đặc riêng biệt và giữ thứ tự tô của nguồn. **viewBox nhỏ hơn có loại hình ẩn không?** Nó thay đổi ánh xạ khung nhìn và vùng hiển thị. Bản thân nó không xóa các đường dẫn nguồn ngoài vùng đó. Kiểm tra cả hình học đã lưu lẫn hình xem trước. **Kết quả có chạy trong mọi ứng dụng cắt không?** Thử nghiệm trình duyệt này không xác lập điều đó. Kiểm tra hình học và thao tác được nhập ở nơi dùng dự định, rồi thực hiện kiểm tra sản xuất phù hợp. ## Nguồn tham khảo 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — Clipping ảnh hưởng kết xuất mà không đổi hình học phần tử được tham chiếu. 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — Kết quả phép giao và các tùy chọn Boolean dựa trên diện tích. 3. [Paper.js: Project](https://paperjs.org/reference/project/) — Nhập SVG, nội dung dự án, biên xuất và độ chính xác số. *** Cần đường dẫn từ nguồn clipart chỉ có bitmap? [Chuẩn bị phương án SVG](https://perfectvector.com/vi/clipart-to-svg), kiểm tra lỗ và màu tô, rồi cắt bản sao làm việc riêng và mở lại kết quả đã lưu trước khi giao. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/permanent-crop-svg) - [SVG feComposite: so sánh hình với in, out và xor](https://perfectvector.com/vi/blog/svg-composite-artwork.md) - [SVG z-index không hoạt động? Sửa thứ tự đường dẫn](https://perfectvector.com/vi/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)