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

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

您必须使用path元素来切割一个洞.

请参阅SVG规范中的示例 :(您可以单击此链接或以下图像查看真正的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" 会破洞.

关键点是在不同方向(顺时针与逆时针)绘制外形和内部形状(孔).

• 顺时针绘制外形并逆时针绘制内(孔)形状.
• 或者相反,逆时针绘制外形(孔)并顺时针绘制内部形状.
• Concat外形和内形(孔)的路径数据.

您可以通过连接更多的孔路径数据来切割更多的孔.

这张图片解释了如何切洞:

请参阅w3c文档: SVG Arc命令 和 SVG填充规则属性.

Answer 2

fill-rule: evenodd如果要防止矩形的填充在圆所在的位置进行绘制,则应该能够使用该属性来实现此效果.请参阅SVG规范中的此示例(仅当您的浏览器支持SVG时,才会显示以下图片):

出于某种原因,我似乎无法得到这个使用类似形状的工作rect和ellipse你的问题提供.这是我的尝试: