如何只保留 SVG 图像的每个对象/路径的可见部分?就像“展平”所有 SVG

平面设计 adobe-illustrator 墨景 svg
2022-01-01 22:45:05

我有一个包含许多对象的 SVG 图像,一个一个一个一个。我需要的是最终的 SVG,具有相同的视觉效果,但在某种程度上我可以更改任何对象的不透明度,而不会显示其他对象的隐藏部分,只显示后面的“洞”。

我做了这张图来说明我的问题: 图表示例图像

我已经使用 Inkscape 手动完成了上面的示例,选择每个正方形并将其复制与我需要应用于“剪切”底层对象的差异数量 ( ctrl+ ) 一样多。-这种方法很难应用于大量的对象。

欢迎任何解决此问题的软件(Adobe Illustrator、命令行工具...)或方法。

3个回答

在插画家上:

如果没有透明...

...选择形状,然后使用窗口'Trim'中的按钮Pathfinder

在此处输入图像描述

修剪可以对具有透明度的对象产生奇怪的作用,所以......

如果有透明...

...选择方块,然后Object > Flatten Transparency将“向量”设置为 100%。

从另一个问题中说明它的图像

在此处输入图像描述

有时,Flatten Transparency让底部的物体保持原样,坐在其他物体的下面。如果发生这种情况,那么由于Flatten Transparency所有矢量形状都具有 100% 的不透明度,因此您只需选择底部形状和与其重叠的形状Trim并按上述方式使用。

然后保存为 SVG,如果你需要 SVG。为避免 Ilmari Karonen 描述的重合边缘问题,您可以使用Object > Transform > Transform Each缩放每个对象,使其围绕其自身中心进行 100.5%。或者,您可以为每个对象赋予其填充颜色的非常细的笔触(这可能是一种更好的方法,因为理想情况下,微小的重叠应该对所有对象都相同,而不与大小成正比)。

我有一个想法,但我确信有更好的方法。

使用 Inkscape

  1. 放置您的对象并确保将每个对象的颜色设置在没有相同颜色接触的位置,(使用尽可能少的颜色)稍后您将更改这些颜色。
  2. Edit -> Preferences在选择的底部附近,选择Bitmaps设置Resolution (256)并关闭。
  3. 选择所有对象,然后Edit -> Make a Bitmap copy(生成图像需要一些时间)。
  4. Path -> Trace Bitmap仅在Mode tap设置Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)标记中Remove background
  5. Options tab取消标记一切!提交OK
  6. Right click在组上,选择Ungroup
  7. 现在选择所有对象,然后Path -> Break Apart.
  8. 现在你可以改变你的颜色看起来很漂亮!

您可能需要删除一些杂散线。

一定要Resolution背!让我知道它是否适合你。

尝试做你要求的事情的一个问题是你的形状最终会出现重合的边缘。渲染时,这样的边缘通常会看起来好像形状之间有一个狭窄的间隙,让背景稍微透出一些光。

发生这种情况有两个原因 - 抗锯齿和舍入:

  • 首先,大多数 SVG 渲染器使用抗锯齿实现,其中沿着形状边缘的像素被绘制为部分透明,透明度的大小取决于形状重叠的每个像素的多少。这通常会产生出色的结果,但并不完美,并且可能暴露其不准确性的一种情况是两个形状的边缘恰好重合。

    要了解为什么会发生这种情况,请想象一个像素,其中一半被红色形状覆盖,而另一半被绿色形状覆盖,这两个形状都绘制在蓝色背景上。使用“完美”的渲染器,这个像素将是 50% 的红色和 50% 的绿色,没有蓝色透过。然而,真正的渲染器会首先绘制红色形状,使像素为 50% 红色和 50% 为蓝色。然后在该背景上绘制绿色形状,使其原始颜色混合的一半被绿色替换,留下 25% 的红色、50% 的绿色和 25% 的蓝色像素。

  • 重合边缘可能存在问题的另一个原因是渲染器通常使用浮点数学,这会产生小的舍入误差。因此,即使边缘应该完全重合,计算它们的不准确可能会稍微改变它们的实际路径,留下一个微小的间隙。(这是 3D 渲染的一个更大问题,此类数值问题可能会使渲染器不确定两个重合表面中的哪一个应该绘制在另一个之前,但它也会影响 2D 渲染。)

原则上,可以通过在不进行抗锯齿的情况下以非常高的分辨率(例如,在每个方向上大约比目标分辨率高 16 倍)渲染整个图像,然后将其缩小以平滑图像,可以避免抗锯齿问题。边缘。但是,与标准的抗锯齿 SVG 渲染相比,这将是一种非常昂贵的渲染方法,这就是通常不使用它的原因。此外,它仍然不能完全解决数值准确性问题。

因此,实际的解决方案是尽可能避免重合边缘。只要您确保任何相邻的形状充分重叠,标准的抗锯齿算法就可以正常工作,并且您不会看到形状之间有任何明显的间隙。