Come mantenere solo le parti visibili di ogni oggetto / percorso di un'immagine SVG? Come "appiattire" tutto l'SVG

Ho un'immagine SVG con molti oggetti, uno sopra altri. Ciò di cui ho bisogno è un SVG finale, con lo stesso risultato visivo, ma in modo da poter cambiare l'opacità di qualsiasi oggetto senza rivelare le parti nascoste degli altri oggetti, rivelando solo il "buco" dietro.

Ho fatto questo diagramma per illustrare la mia domanda:

Ho fatto a mano l'esempio sopra con Inkscape, selezionando ogni quadrato e duplicandolo tante volte quante sono le differenze ( ctrl+ -) che devo applicare per "tagliare" gli oggetti sottostanti. Questo metodo è molto difficile da applicare con una maggiore quantità di oggetti.

Qualsiasi software (Adobe Illustrator, strumento da riga di comando ...) o metodo che risolve questo problema sarà il benvenuto.

Su Illustrator:

Se non c'è trasparenza ...

... seleziona le forme, quindi usa il 'Trim'pulsante nella Pathfinderfinestra.

Trim può agire in modo strano con oggetti che hanno trasparenza, quindi ...

Se non v'è trasparenza ...

... seleziona i quadrati, quindi Object > Flatten Transparencyimposta 'vettori' al 100%.

Immagine che lo illustra da questa altra domanda :

A volte Flatten Transparencylascia l'oggetto in basso non tagliato, seduto sotto tutto il resto. In questo caso, poiché dopo che Flatten Transparencytutte le forme vettoriali hanno l'opacità al 100%, puoi semplicemente selezionare quella forma inferiore e le forme che si sovrappongono e utilizzare Trimcome sopra.

Quindi salva come SVG, se hai bisogno di SVG. Per evitare il problema dei bordi coincidenti descritto da Ilmari Karonen, è possibile utilizzare Object > Transform > Transform Eachper ridimensionare ogni oggetto in modo da dire il 100,5% attorno al proprio centro. Oppure, potresti dare ad ogni oggetto un tratto molto sottile del suo colore di riempimento (probabilmente un approccio migliore poiché idealmente il piccolo pezzo di sovrapposizione dovrebbe essere lo stesso per tutto, non proporzionale alla dimensione).

Ho un'idea, anche se sono sicuro che esiste un modo migliore.

Usando Inkscape

1. Posiziona i tuoi oggetti e assicurati di impostare il colore di ogni oggetto in modo che nessuno dello stesso colore tocchi, (usa il minor numero di colori possibile) li cambierai in seguito.
2. Edit -> Preferencesnella parte inferiore della selezione, selezionare Bitmapsimposta Resolution (256)e chiudi.
3. seleziona tutti i tuoi oggetti, quindi Edit -> Make a Bitmap copy(ci vorrà un po 'di tempo per generare l'immagine).
4. Path -> Trace Bitmapsolo nel segno Mode tapimpostato .Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Remove background
5. Nel Options tabdeselezionare tutto! Submit OK.
6. Right clicksul gruppo, selezionare Ungroup.
7. Ora seleziona tutti i tuoi oggetti e Path -> Break Apart.
8. E ora puoi cambiare i tuoi colori per apparire belli!

Potrebbe essere necessario eliminare alcune linee vaganti.

Assicurati di impostare la Resolutionschiena !. E fammi sapere se funziona per te.

Un problema nel cercare di fare ciò che chiedi in primo luogo è che le tue forme finiranno con bordi coincidenti. Quando viene eseguito il rendering, tali bordi appariranno spesso come se ci fosse uno spazio stretto tra le forme, consentendo allo sfondo di brillare un po '.

Esistono due motivi per cui ciò accade: l'antialiasing e il roundoff:

• Innanzitutto, la maggior parte dei renderer SVG utilizza un'implementazione dell'antialiasing in cui i pixel lungo il bordo di una forma vengono disegnati come parzialmente trasparenti, con la quantità di trasparenza determinata dalla quantità di ciascun pixel che la forma si sovrappone. Questo in genere produce risultati eccellenti, ma non è perfetto, e una situazione che può esporre le sue inesattezze è quando i bordi di due forme coincidono esattamente.

  Per capire perché ciò accade, immagina un pixel di cui una metà è coperta, diciamo, da una forma rossa, e esattamente la metà opposta è coperta da una forma verde, con entrambe queste forme disegnate su uno sfondo blu. Con un renderer "perfetto", questo pixel sarebbe rosso al 50% e verde al 50%, senza che il blu fosse visibile. Tuttavia, ciò che accade con un vero renderer è che per prima cosa disegna, per esempio, la forma rossa, rendendo il pixel 50% rosso e 50% blu. Quindi la forma verde viene disegnata sopra quello sfondo, facendo sì che metà del suo mix di colori originale venga sostituito con il verde, lasciando il pixel 25% rosso, 50% verde e 25% blu.

• L'altro motivo per cui i bordi coincidenti possono essere problematici è che i renderer usano tipicamente la matematica in virgola mobile, che è soggetta a piccoli errori di arrotondamento. Pertanto, anche se i bordi dovrebbero coincidere esattamente, le imprecisioni nel calcolo potrebbero cambiare un po 'il loro percorso effettivo, lasciando un piccolo spazio. (Questo è un problema più grande con il rendering 3D, in cui tali problemi numerici possono rendere il renderer incerto su quale delle due superfici coincidenti debba essere disegnata una di fronte all'altra, ma può influire anche sul rendering 2D.)

In linea di principio, il problema dell'antialiasing potrebbe essere evitato rendendo inizialmente l'intera immagine a una risoluzione molto elevata (diciamo, circa 16 volte superiore alla risoluzione target in ciascuna direzione) senza l'antialiasing, quindi ridimensionandola per rendere più uniforme bordi. Tuttavia, questo sarebbe un metodo di rendering molto costoso rispetto al rendering SVG anti-alias standard, motivo per cui non viene normalmente utilizzato. Inoltre, non risolverebbe del tutto i problemi con precisione numerica.

Pertanto, la soluzione pratica è quella di evitare bordi coincidenti ove possibile. Fintanto che ti assicuri che le forme adiacenti si sovrappongano sufficientemente, l'algoritmo di antialiasing standard funzionerà bene e non vedrai alcun divario apparente tra le forme.