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

时间:2009-12-31 00:14:09

标签: svg

有没有办法在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文件并更改椭圆的半径。

对于我如何做到这一点有什么想法吗?

4 个答案:

答案 0 :(得分:35)

你必须使用path元素来挖洞。

请参阅the example from the SVG specification :(您可以点击此链接或以下图片查看真实的svg文件)

svg hole example

<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外形和内部形状(孔)的路径数据。

您可以通过连接更多的孔径数据来剪切更多的孔。

此图片解释了如何挖洞:

This image explain how to cut a hole

请参阅w3c文档: SVG Arc CommandsSVG fill-rule Property

答案 1 :(得分:22)

如果要防止矩形填充在圆圈所在的位置,您应该可以使用fill-rule: evenodd属性来实现此效果。请参阅this example from the SVG specification(仅当您的浏览器支持SVG时,才会显示以下图片):

A pentagram and two circles, filled in red, with the centers cut showing the white background

出于某种原因,我似乎无法使用您在问题中提供的rectellipse等形状。 Here's my attempt

A blue square with a circle inside

答案 2 :(得分:2)

如果您想使用<path>,则需要使用fill-rule。但是,当然可以更改作为<path>子路径的圆的半径,您只需要掌握arc path command

答案 3 :(得分:-1)

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