How to cut a hole in an SVG rectangle [duplicate]

This question already has answers here: How can I cut one shape inside another? (4 answers) Closed 5 years ago.

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.c开发者_运维技巧om/coding/s1.png

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

Where am I going wrong here?

---

You should be able to use the fill-rule: evenodd(default) property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification:

The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).

• Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
• Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
• Concat the path datas of outer shape and inner shapes(holes).

You can cut more holes by concat more hole path data.

This image explain how to cut a hole:

---

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.

---

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.