svg - 如何将一个形状切入另一个形状？

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 :