如何在另一种形状内切割一个形状? [英] How can I cut one shape inside another?

问题描述

在SVG中，有没有一种方法可以将一种形状切割成另一种形状?例如，我有一个矩形和一个椭圆，我想制作一个在中间有透明孔的矩形.我想它看起来像这样:

Is there a way to cut one shape out of another in SVG? For example, I have a rect and an ellipse and I want to make a rect with a transparent hole in the middle. I would imagine it would look something like this:

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

我能找到的最接近的东西是剪切，这将使我得到两个形状的交集.在我的示例中，这将导致仅孔是实心的，而矩形的其余部分是透明的.

The closest thing I can find is clipping, which will give me the intersection of two shapes. In my example that would result in just the hole being solid and the rest of the rect being transparent.

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

I looked through Inkscape and there is a difference option in the path menu, but this converts the shapes to paths and then creates a new path. The identity of the shapes is lost so there is no easy way to, for example go into the svg file and change the radius of the ellipse.

对于如何执行此操作有任何想法吗?

Is there any ideas for how I might do this?

推荐答案

您应该可以使用 fill-rule: evenodd 属性可实现此效果，如果要防止绘制矩形的填充来绘制圆形所在的位置.请参见来自SVG规范的示例(下图将仅在您的浏览器支持SVG时显示):

You should be able to use the fill-rule: evenodd property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification (image below will only display if your browser supports SVG):

由于某种原因，我似乎无法使它与您在问题中提供的rect和ellipse之类的形状一起使用. 这是我的尝试:

For some reason, I can't seem to get this to work with shapes like the rect and ellipse that you provided in the question. Here's my attempt:

这篇关于如何在另一种形状内切割一个形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！