Bagaimana menjaga hanya bagian yang terlihat dari setiap objek / jalur dari gambar SVG? Seperti "meratakan" semua SVG

Saya memiliki gambar SVG dengan banyak objek, yang lebih dari yang lain. Yang saya butuhkan adalah SVG final, dengan hasil visual yang sama, tetapi dengan cara itu saya bisa mengubah opacity dari objek apa pun tanpa mengungkapkan bagian-bagian tersembunyi dari objek lain, hanya mengungkapkan "lubang" di belakang.

Saya telah melakukan diagram ini untuk menggambarkan pertanyaan saya:

Saya telah melakukan contoh di atas dengan tangan dengan Inkscape, memilih setiap kotak dan menduplikasinya sebanyak jumlah perbedaan ( ctrl+ -) yang perlu saya terapkan untuk "memotong" objek yang mendasarinya. Metode ini sangat sulit diterapkan dengan jumlah objek yang lebih besar.

Semua perangkat lunak (Adobe Illustrator, alat baris perintah ...) atau metode yang menyelesaikan masalah ini akan diterima.

Pada Illustrator:

Jika tidak ada transparansi ...

... pilih bentuk, lalu gunakan 'Trim'tombol di Pathfinderjendela.

Potong dapat bertindak aneh dengan objek yang memiliki transparansi, jadi ...

Jika ada yang transparansi ...

... pilih kotak, lalu Object > Flatten Transparency, atur 'vektor' menjadi 100%.

Gambar menggambarkannya dari pertanyaan lain ini :

Kadang-kadang, Flatten Transparencymeninggalkan objek bawah dipotong, duduk di bawah yang lainnya. Jika ini terjadi, maka karena setelah Flatten Transparencysemua bentuk vektor Anda memiliki opacity 100%, Anda bisa memilih bentuk bawah itu dan bentuk yang tumpang tindih dan gunakan Trimseperti di atas.

Kemudian simpan sebagai SVG, jika Anda membutuhkan SVG. Untuk menghindari masalah tepi kebetulan yang dijelaskan Ilmari Karonen, Anda dapat menggunakan Object > Transform > Transform Eachskala setiap objek untuk mengatakan 100,5% di sekitar pusatnya sendiri. Atau, Anda bisa memberikan setiap objek stroke yang sangat tipis dengan warna isiannya sendiri (mungkin pendekatan yang lebih baik karena idealnya sedikit tumpang tindih harus sama untuk semuanya, tidak sebanding dengan ukuran).

Saya punya ide, meskipun saya yakin ada cara yang lebih baik.

Menggunakan Inkscape

1. Tempatkan objek Anda dan pastikan untuk mengatur warna setiap objek di mana tidak ada warna yang sama menyentuh, (gunakan sesedikit mungkin warna), Anda akan mengubahnya nanti.
2. Edit -> Preferencesdi dekat bagian bawah seleksi, pilih Bitmapsset Resolution (256)dan tutup.
3. pilih semua objek Anda, lalu Edit -> Make a Bitmap copy(akan butuh sedikit waktu untuk menghasilkan gambar).
4. Path -> Trace Bitmapdi Mode tapset Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)menandai satunya Remove background.
5. Di Options tabhapus tanda semuanya! Kirim OK.
6. Right clickpada grup, pilih Ungroup.
7. Sekarang pilih semua Objek Anda, dan Path -> Break Apart.
8. Dan sekarang Anda dapat mengubah warna Anda agar terlihat cantik!

Anda mungkin perlu menghapus beberapa garis liar.

Pastikan untuk mengatur Resolutionkembali !. Dan beri tahu saya jika itu berhasil untuk Anda.

Masalah dengan mencoba melakukan apa yang Anda minta di tempat pertama adalah bahwa bentuk Anda akan berakhir dengan tepi yang bertepatan. Ketika dirender, tepi-tepi tersebut akan sering muncul seolah-olah ada celah sempit di antara bentuk-bentuk, yang memungkinkan latar belakang sedikit menyinari.

Ada dua alasan mengapa ini terjadi - anti-aliasing dan roundoff:

• Pertama, sebagian besar render SVG menggunakan implementasi anti-aliasing di mana piksel di sepanjang tepi bentuk digambarkan sebagian transparan, dengan jumlah transparansi ditentukan oleh seberapa banyak setiap piksel bentuknya tumpang tindih. Ini biasanya menghasilkan hasil yang sangat baik, tetapi itu tidak sempurna, dan satu situasi yang dapat mengekspos ketidakakuratannya adalah ketika tepi dua bentuk kebetulan bertepatan persis.

  Untuk melihat mengapa ini terjadi, bayangkan sebuah piksel yang setengahnya ditutupi oleh, katakanlah, bentuk merah, dan setengah yang berlawanan ditutupi oleh bentuk hijau, dengan kedua bentuk ini digambar dengan latar belakang biru. Dengan penyaji "sempurna", piksel ini akan menjadi 50% merah dan 50% hijau, tanpa biru yang menembus. Namun, apa yang terjadi dengan perender nyata adalah ia pertama kali menggambar, katakanlah, bentuk merah, membuat piksel 50% merah dan 50% biru. Kemudian bentuk hijau digambar di atas latar belakang itu, menyebabkan setengah dari campuran warna aslinya diganti dengan hijau, meninggalkan piksel 25% merah, 50% hijau dan 25% biru.

• Alasan lain mengapa tepi kebetulan bisa bermasalah adalah bahwa penyaji biasanya menggunakan matematika floating point, yang tunduk pada kesalahan pembulatan kecil. Jadi, meskipun tepinya seharusnya bertepatan persis, ketidakakuratan dalam menghitungnya mungkin sedikit mengubah jalur sebenarnya, meninggalkan celah kecil. (Ini adalah masalah yang lebih besar dengan rendering 3D, di mana masalah numerik seperti itu dapat membuat penyaji tidak yakin tentang yang mana dari dua permukaan yang bertepatan yang harus digambar di depan yang lain, tetapi ini dapat memengaruhi rendering 2D juga.)

Pada prinsipnya, masalah anti-aliasing dapat dihindari dengan awalnya membuat seluruh gambar pada resolusi yang sangat tinggi (katakanlah, sekitar 16 kali lebih tinggi dari resolusi target di setiap arah) tanpa anti-aliasing, dan kemudian turunkan untuk memperlancar ujung-ujungnya. Namun, ini akan menjadi metode rendering yang sangat mahal dibandingkan dengan rendering SVG anti-alias standar, yang mengapa itu tidak biasa digunakan. Selain itu, masih belum sepenuhnya menyelesaikan masalah dengan akurasi numerik.

Dengan demikian, solusi praktis adalah menghindari tepi yang kebetulan jika memungkinkan. Selama Anda memastikan bahwa setiap bentuk yang berdekatan tumpang tindih secara memadai, algoritma anti-aliasing standar akan berfungsi dengan baik dan Anda tidak akan melihat celah yang jelas di antara bentuk.