如何在SVG矩形中剪切一个洞
所以基本上我的头衔说,我想在矩形元素中"切洞".
我有两个rect元素,一个在另一个上面.底部的填充颜色为白色,顶部的填充颜色为灰色.
我想要做的是从顶部rect元素中切出一个三角形,以便下面的rect元素显示出来.
此svg元素将用作页面上媒体播放器的音频按钮.换句话说,您将能够左/右单击(或拖动)鼠标,音频水平的变化将通过底部矩形元素宽度的变化来表示,通过切出的三角形显示顶部rect元素.
我希望这不会太混乱.:P
以下是它应该是什么样子的快速模型:http://forboden.com/coding/s1.png
这是我的代码:http://forboden.com/coding/svgClipTest.html
我在哪里错了？
cui*_*ing 62
fill-rule: evenodd如果要防止矩形的填充在圆所在的位置进行绘制,则应该能够使用(默认)属性来实现此效果.从SVG规范中查看此示例:
关键点是在不同方向(顺时针与逆时针)绘制外形和内部形状(孔).
- 顺时针绘制外形并逆时针绘制内(孔)形状.
- 或者相反,逆时针绘制外形(孔)并顺时针绘制内部形状.
- Concat外形和内形(孔)的路径数据.
您可以通过连接更多的孔路径数据来切割更多的孔.
这张图片解释了如何切洞:
- @JakeGriffin 填充规则可以是“非零”而不仅仅是“evenodd”。“非零”模式下路径方向有差异。 (3认同)
- 路径的方向实际上并不重要。Evenodd所做的只是使您每次穿过路径时，都会在填充和不填充之间“切换”状态。三角形示例同样适用于它们都顺时针或逆时针旋转。 (2认同)
Eri*_*röm 11
我知道你已经解决了它,只是想补充一点,如果你想要更先进的东西那么它通常很容易使用<mask>,请参阅http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg例如.
但是,如果你可以避免屏蔽和剪裁(例如只是在顶部绘制东西),这通常会带来更好的性能/用户体验.
最简单的方法是使用<path>洞，并将指针事件设置为，none以便事件可以传递到<rect>下面。当然还有很多其他方法来处理事件，例如用 a 包装它们<g>并在其上处理事件。
您不需要将自己限制在基本形状上并使用复杂的剪裁。让事情足够灵活，以便您可以复制和粘贴 inkscape 等工具生成的路径数据。
| 归档时间： |
|
| 查看次数： |
27484 次 |
| 最近记录： |