有没有办法在 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 文件并更改椭圆的半径。
对我如何做到这一点有什么想法吗？
【问题讨论】：
标签： svg
不幸的是，似乎没有办法做到这一点。 SVG 1.0 和 SVG 1.1 都不支持布尔形状操作，出于其他原因支持剪裁。你能得到的最接近的方法是尝试获得一个“倒置”的形状来进行剪裁。
【讨论】：
你应该可以使用fill-rule: evenodd属性来实现这个效果，如果你想防止矩形的填充画在圆圈所在的位置。请参阅this example from the SVG specification（仅当您的浏览器支持 SVG 时才会显示下图）：
出于某种原因，我似乎无法使用您在问题中提供的 rect 和 ellipse 之类的形状。 Here's my attempt:
【讨论】：
如果你想使用fill-rule，你需要使用<path>。但是<path>的子路径当然可以改变圆的半径，你只需要掌握arc path command即可。
【讨论】：
你必须使用路径元素来挖一个洞。
见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" 会打洞。
关键是在不同方向（顺时针与逆时针）绘制外部形状和内部形状（孔）。
您可以通过连接更多孔路径数据来切割更多孔。
这张图片解释了如何挖一个洞：
查看 w3c 文档： SVG Arc Commands 和 SVG fill-rule Property.
【讨论】：
fill-rule="evenodd"。两条路径可以在同一个方向，它仍然有效。在奇数个形状重叠的地方，绘制像素，在偶数个重叠的地方，不绘制像素。