Làm thế nào để chỉ giữ các phần có thể nhìn thấy của mọi đối tượng / đường dẫn của hình ảnh SVG? Giống như những gì làm phẳng tất cả các SVG

Tôi có một hình ảnh SVG với nhiều đối tượng, nhiều đối tượng hơn các bà mẹ. Thứ tôi cần là một SVG cuối cùng, có cùng kết quả hình ảnh, nhưng theo cách mà tôi có thể thay đổi độ mờ của bất kỳ vật thể nào mà không để lộ các phần ẩn của các vật thể khác, chỉ lộ ra "lỗ hổng" phía sau.

Tôi đã thực hiện sơ đồ này để minh họa câu hỏi của mình:

Tôi đã thực hiện ví dụ trên bằng tay với Inkscape, chọn mọi ô vuông và nhân đôi nó nhiều lần bằng số lượng khác biệt ( ctrl+ -) mà tôi cần áp dụng để "cắt" các đối tượng bên dưới. Phương pháp này rất khó áp dụng với số lượng đối tượng lớn hơn.

Bất kỳ phần mềm nào (Adobe Illustrator, công cụ dòng lệnh ...) hoặc phương pháp giải quyết vấn đề này đều được hoan nghênh.

Trên Illustrator:

Nếu không có sự minh bạch ...

... Chọn các hình dạng, sau đó sử dụng 'Trim'nút trong Pathfindercửa sổ.

Trim có thể hành động kỳ lạ với các đối tượng có độ trong suốt, vì vậy ...

Nếu có là tính minh bạch ...

... chọn các hình vuông, sau đó Object > Flatten Transparency, đặt 'vectơ' thành 100%.

Hình ảnh minh họa nó từ câu hỏi khác này :

Đôi khi, Flatten Transparencyđể lại các đối tượng dưới cùng không bị thương, ngồi dưới mọi thứ khác. Nếu điều này xảy ra, thì sau khi Flatten Transparencytất cả các hình dạng vectơ của bạn có độ mờ 100%, bạn chỉ cần chọn hình dạng dưới cùng đó và các hình dạng chồng lên nó và sử dụng Trimnhư trên.

Sau đó lưu dưới dạng SVG, nếu bạn cần SVG. Để tránh vấn đề cạnh trùng khớp mà Ilmari Karonen mô tả, bạn có thể sử dụng Object > Transform > Transform Eachđể chia tỷ lệ cho từng đối tượng để nói 100,5% xung quanh trung tâm của chính nó. Hoặc, bạn có thể cung cấp cho mỗi đối tượng một nét rất mỏng với màu tô riêng của nó (có thể là cách tiếp cận tốt hơn vì lý tưởng là một chút chồng chéo sẽ giống nhau cho mọi thứ, không tỷ lệ với kích thước).

Tôi có một ý tưởng, mặc dù tôi chắc chắn có một cách tốt hơn.

Sử dụng Inkscape

1. Đặt các đối tượng của bạn và đảm bảo đặt màu của từng đối tượng trong đó không có màu nào giống nhau, (sử dụng càng ít màu càng tốt) bạn sẽ thay đổi các màu này sau.
2. Edit -> Preferencesgần dưới cùng của lựa chọn, chọn Bitmapsthiết lập Resolution (256)và đóng.
3. chọn tất cả các đối tượng của bạn, sau đó Edit -> Make a Bitmap copy(sẽ mất một chút thời gian để tạo hình ảnh).
4. Path -> Trace Bitmaptrong dấu chỉ Mode tapthiết lập .Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Remove background
5. Trong Options tabđánh dấu mọi thứ! Trình OK.
6. Right clickvào nhóm, chọn Ungroup.
7. Bây giờ chọn tất cả các Đối tượng của bạn, và Path -> Break Apart.
8. Và bây giờ bạn có thể thay đổi màu sắc của bạn để trông đẹp hơn!

Bạn có thể cần phải xóa một số dòng đi lạc.

Hãy chắc chắn để đặt mặt Resolutionsau!. Và cho tôi biết nếu nó làm việc cho bạn.

Một vấn đề với việc cố gắng làm những gì bạn yêu cầu ở nơi đầu tiên là hình dạng của bạn sẽ kết thúc với các cạnh trùng khớp. Khi được kết xuất, các cạnh như vậy thường sẽ xuất hiện như thể có một khoảng cách hẹp giữa các hình dạng, cho phép nền sáng qua một chút.

Có hai lý do tại sao điều này xảy ra - chống răng cưa và làm tròn:

• Đầu tiên, hầu hết các trình kết xuất SVG sử dụng triển khai khử răng cưa trong đó các pixel dọc theo cạnh của hình được vẽ trong suốt một phần, với mức độ trong suốt được xác định bởi số lượng của mỗi pixel chồng lên nhau. Điều này thường tạo ra kết quả tuyệt vời, nhưng nó không hoàn hảo, và một tình huống có thể phơi bày sự không chính xác của nó là khi các cạnh của hai hình dạng xảy ra trùng khớp chính xác.

  Để xem tại sao điều này xảy ra, hãy tưởng tượng một pixel trong đó một nửa được bao phủ bởi một hình màu đỏ và chính xác là nửa đối diện được bao phủ bởi một hình dạng màu xanh lá cây, với cả hai hình dạng này được vẽ trên nền màu xanh. Với trình kết xuất "hoàn hảo", pixel này sẽ có 50% màu đỏ và 50% màu xanh lá cây, không có màu xanh hiển thị. Tuy nhiên, những gì xảy ra với một trình kết xuất thực sự là lần đầu tiên nó vẽ hình dạng màu đỏ, làm cho pixel 50% đỏ và 50% xanh. Sau đó, hình dạng màu xanh lá cây được vẽ trên nền của nó, làm cho một nửa hỗn hợp màu ban đầu của nó được thay thế bằng màu xanh lá cây, để lại pixel 25% đỏ, 50% xanh lục và 25% xanh lam.

• Một lý do khác khiến các cạnh trùng khớp có thể gặp vấn đề là các trình kết xuất thường sử dụng phép toán dấu phẩy động, có thể xảy ra các lỗi tròn nhỏ. Do đó, mặc dù các cạnh được cho là trùng khớp chính xác, sự không chính xác trong việc tính toán chúng có thể thay đổi đường đi thực tế của chúng một chút, để lại một khoảng cách nhỏ. .

Về nguyên tắc, có thể tránh được vấn đề khử răng cưa bằng cách ban đầu hiển thị toàn bộ hình ảnh ở độ phân giải rất cao (giả sử, cao hơn khoảng 16 lần so với độ phân giải mục tiêu theo mỗi hướng) mà không khử răng cưa, sau đó thu nhỏ nó xuống để làm mịn các cạnh. Tuy nhiên, đây sẽ là một phương thức kết xuất rất tốn kém so với kết xuất SVG chống răng cưa tiêu chuẩn, đó là lý do tại sao nó không được sử dụng thông thường. Ngoài ra, nó vẫn không hoàn toàn giải quyết các vấn đề với độ chính xác bằng số.

Vì vậy, giải pháp thực tế là tránh các cạnh trùng hợp nếu có thể. Miễn là bạn đảm bảo rằng bất kỳ hình dạng liền kề nào trùng nhau đủ, thuật toán khử răng cưa tiêu chuẩn sẽ hoạt động tốt và bạn sẽ không thấy bất kỳ khoảng trống rõ ràng nào giữa các hình dạng.