如何在SVG矩形中切孔 [英] How to cut a hole in an SVG rectangle

问题描述

因此，基本上就像我的书名所说，我想在rect元素中打个洞".

So basically as my title says, I want to "cut a hole" in a rect element.

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

I have two rect elements, one on top of the other. The one on the bottom has a fill colour of white, and the one on the top has a fill colour of grey.

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

What I want to do is cut a triangle out of the top rect element so that the rect element below shows through.

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

This svg element is going to be used as an audio button for a media player on a page. In other words, you'll be able to click (or drag) your mouse left/right and the change in audio level will be represented by a change in the width of the rect element on the bottom, which shows through the triangle cut out of the top rect element.

我希望不要太困惑. :P

I hope that's not too confusing. :P

以下是其外观的快速模型: http://forboden.com/coding/s1.png

Here is a quick mockup of what it should look like: http://forboden.com/coding/s1.png

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

我在哪里错了?

推荐答案

最简单的方法是在孔中使用<path>，并将指针事件设置为none，以便事件可以传递到下面的<rect>.当然，还有许多其他方法可以处理事件，例如用<g>包装事件并对其进行处理.

Easiest way is to use <path> with the hole, and set pointer-events to none so events can pass through to the <rect> under. Of course there are many other ways to handle events such as wrapping them with a <g> and handling events on it.

您不必将自己局限于基本形状，也不必使用复杂的剪裁.使事情变得易于理解，以便您可以复制和粘贴由inkscape之类的工具生成的路径数据.

You don't need to limit yourself to the basic shapes and use complicated clipping. Make things felxible enough so you can copy&paste path data generated by tools like inkscape.

这篇关于如何在SVG矩形中切孔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！