Inkscape:位图跟踪后,将形状分解为自己的路径(用于 css 动画)

平面设计 墨景 svg css
2022-02-04 14:07:26

我有这个非常简单的黑白 svg,它是从 inkscape 中的位图跟踪创建的(下面是 png 原件,它不允许上传 svg?)。我的最终目标是让图像中的每个黑色形状作为自己的路径或多边形,可以选择作为 css 中的元素并进行动画处理。(包括眼睛,这将是他们自己的形状,以后填充任何颜色)。

在位图跟踪之后,我看到它都是一条路径。我已经看到建议如何打破路径的解决方案,但我没有成功创建这些单独的对象。

这个答案似乎是我正在寻找的,但它并没有真正起作用:Breaking polygons into paths in Inkscape

如果我的目标是 css-selectable svg 元素,我会更好地手工绘制它吗?

谢谢

在此处输入图像描述

2个回答
  1. 跟踪位图,删除位图,然后选择跟踪。

  2. 路径 > 分开

  3. 选择一个眼圈,在选择头部的同时按住 Shift 键。现在选择了两条路径。

  4. 路径 > 差异

  5. 对另一只眼睛重复步骤 3 和 4。

现在所有部分都是单独的路径。眼睛和头部合二为一。

在此处输入图像描述

当然,如果您愿意,您可以将眼圈作为单独的路径,而不是将它们与差异组合。也许只需将它们填充为白色?

在此处输入图像描述

另一种方法是创建与组件一样多的副本 (Ctrl + D)。Ctrl+D 将副本准确地叠放在一起,省去了对齐的麻烦。

然后,对于每个副本,使用选择节点工具删除多余的部分。例如,在一个选择中删除除左翼之外的所有内容,在另一个选择中删除除右翼之外的所有内容。