如何在SVG矩形中剪切一个洞

Question

所以基本上我的头衔说，我想在一个矩形元素中“切洞”。

我有两个rect元素，一个在另一个上面。底部的填充颜色为白色，顶部的填充颜色为灰色。

我想要做的是从顶部rect元素中剪切一个三角形，以便下面的rect元素显示出来。

此svg元素将用作页面上媒体播放器的音频按钮。换句话说，您将能够左/右单击（或拖动）鼠标，音频水平的变化将通过底部矩形元素宽度的变化来表示，通过切出的三角形显示顶部rect元素。

我希望这不会太混乱。 ：P

以下是一个快速模型：http://forboden.com/coding/s1.png

这是我的代码：http://forboden.com/coding/svgClipTest.html

我在哪里错了？

Answer 1

如果要防止矩形填充在圆圈所在的位置，您应该可以使用fill-rule: evenodd（默认）属性来实现此效果。见this example from the SVG specification：

关键是在不同方向（顺时针方向与逆时针方向）绘制外形和内形（孔）。

• 顺时针绘制外形并逆时针绘制内（孔）形状。
• 或者相反，逆时针绘制外形（孔）并顺时针绘制内部形状。
• Concat外形和内部形状（孔）的路径数据。

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

此图片解释了如何挖洞：

Answer 2

我知道你已经解决了它，只是想补充一点，如果你想要更高级的东西，那么使用<mask>通常很容易，例如http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg。

但是，如果你可以避免屏蔽和剪裁（例如只是在顶部画画），这通常会带来更好的性能/用户体验。

Answer 3

最简单的方法是将<path>与洞一起使用，并将指针事件设置为none，以便事件可以传递到<rect>下。当然，还有许多其他方法可以处理事件，例如用<g>包装事件并处理事件。

您无需限制自己的基本形状并使用复杂的剪裁。使事情变得足够灵活，这样您就可以复制和粘贴由inkscape等工具生成的路径数据。