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

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

您应该能够使用fill-rule: evenodd属性来达到这个效果，如果你想防止矩形的填充从画在圆。见this example from the SVG specification（如果你的浏览器支持SVG下面的图片仅显示）：

出于某种原因，我似乎无法得到这与像rect和ellipse形状，你所提供的工作题。 Here's my attempt：

Answer 2

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

Answer 3

您需要使用<path>，如果你想使用fill-rule。但它肯定可以改变一个循环，是<path>的子路径的半径，你只需要掌握arc path command。

Answer 4

您必须使用路径元素上开一个洞。

见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。