如何将一个形状切入另一个形状? [英] How can I cut one shape inside another?

问题描述

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

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

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

我查看了 Inkscape，路径菜单中有一个不同的选项，但这会将形状转换为路径，然后创建一个新路径.形状的标识丢失了，因此没有简单的方法，例如进入 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.

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?

解决方案

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):

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屋！