为 SVG 手动反转路径填充

平面设计 svg 图像编辑
2022-01-18 21:30:24

简而言之,我想做与这个问题完全相反的事情:
是否可以“反转” SVG 文件?不是颜色,而是实际的区域/路径?.

我有一个单色 SVG 图像,它是一个带有透明部分的纯色正方形。这不是我的工作,所以我没有这张图片的原始源数据。

我没有(也买不起)Adobe Illustrator 或任何其他付费图形编辑软件,因此必须使用 Inkscape 或其他一些免费的 SVG 编辑程序。

我需要将此 SVG 图像的现有路径“反转”,以便填充透明区域,并将彩色区域变为透明(或完全删除)。

我知道这样做的最常见方法涉及蒙版,但我需要此 SVG 图像便于其他人(不是图形设计师)稍后编辑。除非有办法将面具的视觉效果合并到路径本身,否则我会被困住,避免像瘟疫这样的面具。

那么:有没有办法在不使用蒙版的情况下反转 SVG 文件的填充区域,如果是这样,有人可以给我一步一步的说明吗?

谢谢你。

2个回答

SVG 只是一个 XML 文件,因此您可以在任何文本编辑器中对其进行编辑。

如果您所拥有的只是一个带有透明区域的实体形状,那么它可能是一个单一的复合路径。

以此为例:

在此处输入图像描述

SVG 代码如下所示:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <path d="M4,5v391h391V5H4z M291.703,327.4L199.5,260.414l-92.204,66.991l35.219-108.403L50.312,152h113.97L199.5,43.608L234.719,152h113.97l-92.204,67.003L291.703,327.4z"/>
</svg>

这里重要的部分是 的d属性path,它实际上包含了复合路径中所有路径的绘制命令。Az表示路径的终点,因此仅凭这一点我们就可以很容易地确定哪些部分是不同的路径。

你的背景矩形应该是第一条路径(不一定,但只要你没有太多的路径,它应该很容易通过一些试验和错误或通过查看路径命令的坐标来找到)。

所以删除从第一个M到第一个的所有内容z

<path d="M4,5v391h391V5H4z M291.703,327.4L199.5,260.414l-92.204,66.991l35.219-108.403L50.312,152h113.97L199.5,43.608L234.719,152h113.97l-92.204,67.003L291.703,327.4z"/>
         ^^^^^^^^^^^^^^^^^

这给了我们这个:

在此处输入图像描述

我假设您也可以在 Inkscape 中打开 SVG 并删除周围的路径。

如果您在 Inkscape 中选择图像并选择“路径->分离”,它会将背景与透明区域“分离”。

然后透明区域将显示为实体对象 - 只需将背景对象移开即可查看新创建的对象。