如何在另一个内部切割一个形状？

Question

有没有办法在SVG中切出另一个形状？例如，我有一个矩形和一个椭圆，我想制作一个中间有透明孔的矩形。我想它看起来像这样：

<set operation="difference" fill="black">
    <rect x="10" y="10" width="50" height="50/>
    <ellipse cx="35" cy="35" rx=10 ry=10/>
</set>

我能找到的最接近的东西是剪裁，它会给我两个形状的交集。在我的例子中，这将导致只有孔是实心的，而矩形的其余部分是透明的。

我查看了Inkscape，路径菜单中有一个不同的选项，但是这会将形状转换为路径，然后创建一个新路径。形状的标识丢失，因此没有简单的方法，例如进入svg文件并更改椭圆的半径。

对于我如何做到这一点有什么想法吗？

Answer 1

你必须使用path元素来挖洞。

请参阅the example from the SVG specification :(您可以点击此链接或以下图片查看真实的svg文件）

<g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3">
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/>

    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
             M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/>

    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/>
</g>

---

对于你的情况：

<path d="M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z"
    stroke="blue" stroke-width="2" fill="red" fill-rule="evenodd" />

M10 10h50v50h-50z将绘制一个矩形。

M25 35a10 10 0 1 1 0 0.0001 z将绘制一个椭圆。

fill-rule="evenodd"将成为漏洞。

---

关键是在不同方向（顺时针方向与逆时针方向）绘制外形和内形（孔）。

• 顺时针绘制外形并逆时针绘制内（孔）形状。
• 或者相反，逆时针绘制外形（孔）并顺时针绘制内部形状。
• Concat外形和内部形状（孔）的路径数据。

您可以通过连接更多的孔径数据来剪切更多的孔。

此图片解释了如何挖洞：

请参阅w3c文档： SVG Arc Commands 和 SVG fill-rule Property

Answer 2

如果要防止矩形填充在圆圈所在的位置，您应该可以使用fill-rule: evenodd属性来实现此效果。请参阅this example from the SVG specification（仅当您的浏览器支持SVG时，才会显示以下图片）：

出于某种原因，我似乎无法使用您在问题中提供的rect和ellipse等形状。 Here's my attempt：

Answer 3

如果您想使用<path>，则需要使用fill-rule。但是，当然可以更改作为<path>子路径的圆的半径，您只需要掌握arc path command。

Answer 4

不幸的是，似乎没有办法做到这一点。 SVG 1.0和SVG 1.1都不支持布尔形状操作，由于其他原因支持剪切。你可以得到的最接近的是试图获得一个“倒”的形状来做剪裁。