Wie kann man nur die sichtbaren Teile jedes Objekts / Pfades eines SVG-Bildes behalten? Wie alle SVG "abflachen"

Ich habe ein SVG-Bild mit vielen Objekten, eines über einem anderen. Was ich brauche, ist eine endgültige SVG mit dem gleichen visuellen Ergebnis, aber auf eine Weise, dass ich die Deckkraft eines Objekts ändern kann, ohne die verborgenen Teile der anderen Objekte zu enthüllen und nur das "Loch" dahinter zu enthüllen.

Ich habe dieses Diagramm erstellt , um meine Frage zu veranschaulichen:

Ich habe das obige Beispiel von Hand mit Inkscape gemacht, jedes Quadrat ausgewählt und es so oft dupliziert wie die Anzahl der Unterschiede ( ctrl+ -), die ich anwenden muss, um die zugrunde liegenden Objekte zu "schneiden". Diese Methode ist bei einer größeren Anzahl von Objekten sehr schwer anzuwenden.

Jede Software (Adobe Illustrator, Befehlszeilentool ...) oder Methode, die dieses Problem löst, ist willkommen.

Auf Illustrator:

Wenn es keine Transparenz gibt ...

... wählen Sie die Formen aus und klicken Sie auf die 'Trim'Schaltfläche im PathfinderFenster.

Trimmen kann bei Objekten mit Transparenz seltsam wirken, also ...

Wenn es ist Transparenz ...

... wählen Sie die Quadrate aus und Object > Flatten Transparencysetzen Sie 'Vektoren' auf 100%.

Bild illustriert es von dieser anderen Frage :

Manchmal Flatten Transparencybleibt das untere Objekt ungeschnitten und sitzt unter allem anderen. In diesem Fall können Sie, da Flatten Transparencyalle Ihre Vektorformen eine Deckkraft von 100% haben, einfach diese untere Form und die Formen, die sie überlappen, auswählen und Trimwie oben verwenden.

Speichern Sie dann als SVG, wenn Sie SVG benötigen. Um das Problem der zusammenfallenden Kanten zu vermeiden, das Ilmari Karonen beschreibt, können Sie Object > Transform > Transform Eachjedes Objekt so skalieren, dass es um seine eigene Mitte 100,5% beträgt. Oder Sie können jedem Objekt einen sehr dünnen Strich mit seiner eigenen Füllfarbe geben (wahrscheinlich ein besserer Ansatz, da im Idealfall die winzige Überlappung für alles gleich sein sollte, nicht proportional zur Größe).

Ich habe eine Idee, obwohl ich sicher bin, dass es einen besseren Weg gibt.

Inkscape verwenden

1. Platzieren Sie Ihre Objekte und stellen Sie sicher, dass Sie die Farbe jedes Objekts so einstellen, dass sich nicht dieselbe Farbe berührt (verwenden Sie so wenig Farben wie möglich). Sie werden diese später ändern.
2. Edit -> PreferencesWählen Sie am unteren Rand der Auswahl BitmapsSet Resolution (256)und Schließen aus.
3. Wählen Sie dann alle Ihre Objekte aus Edit -> Make a Bitmap copy(es wird einige Zeit dauern, bis das Bild erstellt ist).
4. Path -> Trace Bitmapnur in der Mode tapeingestellten Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Marke Remove background.
5. In der Options tabUnmarkierung alles! Senden OK.
6. Right clickWählen Sie in der Gruppe aus Ungroup.
7. Wählen Sie nun alle Ihre Objekte aus und Path -> Break Apart.
8. Und jetzt können Sie Ihre Farben ändern, um hübsch auszusehen!

Möglicherweise müssen Sie einige Streulinien löschen.

Stellen Sie sicher, dass Sie den ResolutionRücken setzen!. Und lassen Sie mich wissen, ob es für Sie funktioniert.

Ein Problem beim Versuch, das zu tun, wonach Sie zuerst fragen, besteht darin, dass Ihre Formen mit zusammenfallenden Kanten enden. Beim Rendern erscheinen solche Kanten oft so, als ob zwischen den Formen eine enge Lücke vorhanden wäre, sodass der Hintergrund ein wenig durchscheinen kann.

Dafür gibt es zwei Gründe - Anti-Aliasing und Roundoff:

• Erstens verwenden die meisten SVG-Renderer eine Anti-Aliasing-Implementierung, bei der Pixel entlang der Kante einer Form als teilweise transparent gezeichnet werden, wobei der Grad der Transparenz davon abhängt, wie viel von jedem Pixel die Form überlappt. Dies führt normalerweise zu hervorragenden Ergebnissen, ist jedoch nicht perfekt, und eine Situation, die seine Ungenauigkeiten aufdecken kann, besteht darin, dass die Kanten zweier Formen genau übereinstimmen.

  Um zu sehen, warum dies geschieht, stellen Sie sich ein Pixel vor, von dem eine Hälfte beispielsweise von einer roten Form und genau die andere Hälfte von einer grünen Form bedeckt ist, wobei beide Formen auf einem blauen Hintergrund gezeichnet sind. Mit einem "perfekten" Renderer wäre dieses Pixel zu 50% rot und zu 50% grün, ohne dass Blau durchscheint. Was jedoch mit einem echten Renderer passiert, ist, dass er zuerst beispielsweise die rote Form zeichnet, wodurch das Pixel zu 50% rot und zu 50% blau wird. Dann wird die grüne Form über diesen Hintergrund gezeichnet, wodurch die Hälfte der ursprünglichen Farbmischung durch Grün ersetzt wird und das Pixel 25% rot, 50% grün und 25% blau bleibt.

• Der andere Grund, warum zusammenfallende Kanten problematisch sein können, besteht darin, dass Renderer normalerweise Gleitkomma-Mathematik verwenden, die kleinen Rundungsfehlern unterliegt. Obwohl also die Kanten soll genau übereinstimmen, Ungenauigkeiten bei der Berechnung sie könnten ihre tatsächlichen Pfad ein wenig ändern, eine winzige Lücke hinterlassen. (Dies ist ein größeres Problem beim 3D-Rendering, bei dem der Renderer aufgrund solcher numerischer Probleme möglicherweise nicht sicher ist, welche der beiden zusammenfallenden Oberflächen vor der anderen gezeichnet werden sollen. Dies kann sich jedoch auch auf das 2D-Rendering auswirken.)

Im Prinzip könnte das Problem des Anti-Aliasing vermieden werden, indem das gesamte Bild zunächst mit einer sehr hohen Auflösung (z. B. etwa 16-mal höher als die Zielauflösung in jeder Richtung) ohne Anti-Aliasing gerendert und dann verkleinert wird, um das Bild zu glätten Kanten. Dies wäre jedoch eine sehr teure Rendering-Methode im Vergleich zum Standard-SVG-Rendering mit Anti-Aliasing, weshalb es normalerweise nicht verwendet wird. Außerdem würde es Probleme mit numerischer Genauigkeit immer noch nicht vollständig lösen.

Die praktische Lösung besteht daher darin, nach Möglichkeit zusammenfallende Kanten zu vermeiden. Solange Sie sicherstellen, dass sich benachbarte Formen ausreichend überlappen, funktioniert der Standard-Anti-Aliasing-Algorithmus einwandfrei und Sie sehen keine offensichtlichen Lücken zwischen den Formen.