所以基本上我的头衔说,我想在一个矩形元素中“切洞”。
我有两个rect元素,一个在另一个上面。底部的填充颜色为白色,顶部的填充颜色为灰色。
我想要做的是从顶部rect元素中剪切一个三角形,以便下面的rect元素显示出来。
此svg元素将用作页面上媒体播放器的音频按钮。换句话说,您将能够左/右单击(或拖动)鼠标,音频水平的变化将通过底部矩形元素宽度的变化来表示,通过切出的三角形显示顶部rect元素。
我希望这不会太混乱。 :P
以下是一个快速模型:http://forboden.com/coding/s1.png
这是我的代码:http://forboden.com/coding/svgClipTest.html
我在哪里错了?
答案 0 :(得分:61)
如果要防止矩形填充在圆圈所在的位置,您应该可以使用fill-rule: evenodd
(默认)属性来实现此效果。见this example from the SVG specification:
关键是在不同方向(顺时针方向与逆时针方向)绘制外形和内形(孔)。
您可以通过连接更多的孔径数据来剪切更多的孔。
此图片解释了如何挖洞:
答案 1 :(得分:9)
我知道你已经解决了它,只是想补充一点,如果你想要更高级的东西,那么使用<mask>
通常很容易,例如http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg。
但是,如果你可以避免屏蔽和剪裁(例如只是在顶部画画),这通常会带来更好的性能/用户体验。
答案 2 :(得分:2)
最简单的方法是将<path>
与洞一起使用,并将指针事件设置为none
,以便事件可以传递到<rect>
下。当然,还有许多其他方法可以处理事件,例如用<g>
包装事件并处理事件。
您无需限制自己的基本形状并使用复杂的剪裁。使事情变得足够灵活,这样您就可以复制和粘贴由inkscape等工具生成的路径数据。