¿Cómo mantener solo las partes visibles de cada objeto / ruta de una imagen SVG? Como "aplanar" todos los SVG

Tengo una imagen SVG con muchos objetos, unos sobre otros. Lo que necesito es un SVG final, con el mismo resultado visual, pero de una manera que pueda cambiar la opacidad de cualquier objeto sin revelar las partes ocultas de los otros objetos, revelando solo el "agujero" detrás.

He hecho este diagrama para ilustrar mi pregunta:

He hecho el ejemplo anterior a mano con Inkscape, seleccionando cada cuadrado y duplicándolo tantas veces como el número de diferencias ( ctrl+ -) que necesito aplicar para "cortar" los objetos subyacentes. Este método es muy difícil de aplicar con una mayor cantidad de objetos.

Cualquier software (Adobe Illustrator, herramienta de línea de comando ...) o método que resuelva este problema será bienvenido.

En ilustrador:

Si no hay transparencia ...

... seleccione las formas, luego use el 'Trim'botón en la Pathfinderventana.

Trim puede actuar de manera extraña con objetos que tienen transparencia, así que ...

Si no es la transparencia ...

... seleccione los cuadrados, luego Object > Flatten Transparency, establezca 'vectores' al 100%.

Imagen que lo ilustra de esta otra pregunta :

A veces, Flatten Transparencydeja el objeto inferior sin cortar, sentado debajo de todo lo demás. Si esto sucede, ya que después de que Flatten Transparencytodas sus formas vectoriales tengan una opacidad del 100%, puede seleccionar esa forma inferior y las formas que se superponen y usar Trimcomo se indicó anteriormente.

Luego guarde como SVG, si necesita SVG. Para evitar el problema de bordes coincidentes que describe Ilmari Karonen, puede usar Object > Transform > Transform Eachpara escalar cada objeto para decir 100.5% alrededor de su propio centro. O bien, puede darle a cada objeto un trazo muy fino de su propio color de relleno (probablemente un mejor enfoque, ya que idealmente la pequeña superposición debería ser la misma para todo, no proporcional al tamaño).

Tengo una idea, aunque estoy seguro de que hay una mejor manera.

Usando Inkscape

1. Coloque sus objetos y asegúrese de establecer el color de cada objeto donde no se toque ninguno del mismo color (use la menor cantidad de colores posible) los cambiará más adelante.
2. Edit -> Preferencescerca del final de la selección, seleccione Bitmapsestablecer Resolution (256)y cerrar.
3. seleccione todos sus objetos y luego Edit -> Make a Bitmap copy(tomará un poco de tiempo generar la imagen).
4. Path -> Trace Bitmapsolo en la marca de Mode tapconjunto .Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Remove background
5. En el Options tabdesmarcar todo! Presentar OK.
6. Right clicken grupo, seleccione Ungroup.
7. Ahora seleccione todos sus objetos, y Path -> Break Apart.
8. ¡Y ahora puedes cambiar tus colores para que luzcan bonitos!

Es posible que deba eliminar algunas líneas perdidas.

¡Asegúrate de poner la Resolutionespalda! Y avísame si te funciona.

Un problema al intentar hacer lo que pides en primer lugar es que tus formas terminarán con bordes coincidentes. Cuando se procesan, tales bordes a menudo aparecerán como si hubiera un espacio estrecho entre las formas, permitiendo que el fondo brille un poco.

Hay dos razones por las que esto sucede: anti-aliasing y redondeo:

• Primero, la mayoría de los renderizadores SVG usan una implementación de suavizado en la cual los píxeles a lo largo del borde de una forma se dibujan como parcialmente transparentes, con la cantidad de transparencia determinada por la cantidad de cada píxel que se superpone. Esto generalmente produce excelentes resultados, pero no es perfecto, y una situación que puede exponer sus imprecisiones es cuando los bordes de dos formas coinciden exactamente.

  Para ver por qué sucede esto, imagine un píxel del cual la mitad está cubierta por, digamos, una forma roja, y exactamente la mitad opuesta está cubierta por una forma verde, con ambas formas dibujadas sobre un fondo azul. Con un renderizador "perfecto", este píxel sería 50% rojo y 50% verde, sin azul. Sin embargo, lo que sucede con un renderizador real es que primero dibuja, por ejemplo, la forma roja, haciendo que el píxel sea 50% rojo y 50% azul. Luego, la forma verde se dibuja sobre ese fondo, lo que hace que la mitad de su mezcla de color original se reemplace con verde, dejando el píxel 25% rojo, 50% verde y 25% azul.

• La otra razón por la cual los bordes coincidentes pueden ser problemáticos es que los renderizadores suelen usar matemática de punto flotante, que está sujeto a pequeños errores de redondeo. Por lo tanto, aunque se supone que los bordes coinciden exactamente, las imprecisiones al calcularlos pueden cambiar un poco su camino real, dejando un pequeño espacio. (Este es un problema mayor con el renderizado 3D, donde tales problemas numéricos pueden dejar al renderizador incierto sobre cuál de las dos superficies coincidentes se debe dibujar frente a la otra, pero también puede afectar el renderizado 2D).

En principio, el problema de suavizado podría evitarse al presentar inicialmente la imagen completa a una resolución muy alta (por ejemplo, aproximadamente 16 veces más alta que la resolución objetivo en cada dirección) sin suavizar, y luego reducirla para suavizar bordes Sin embargo, este sería un método de renderizado muy costoso en comparación con el renderizado SVG suavizado estándar, por lo que normalmente no se usa. Además, todavía no resolvería por completo los problemas con precisión numérica.

Por lo tanto, la solución práctica es evitar bordes coincidentes cuando sea posible. Siempre que se asegure de que las formas adyacentes se superpongan lo suficiente, el algoritmo de suavizado estándar funcionará bien y no verá ningún espacio aparente entre las formas.