How to cut a hole in an SVG rectangle

Question

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

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.

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

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.

I hope that's not too confusing. :P

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

Here is my code: http://forboden.com/coding/svgClipTest.html

Where am I going wrong here?

Answer 1

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.

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.

Answer 2

I see that you have it solved already, just wanted to add that if you want something more advanced then it's often quite easy to use a <mask>, see http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg for example.

However, if you can avoid masking and clipping (e.g by just drawing things on top) that usually leads to better performance/user-experience.