title: How to cut a hole in an SVG rectangle
body: <p>So basically as my title says, I want to "cut a hole" in a rect element. </p>
  
  <p>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.</p>
  
  <p>What I want to do is cut a triangle out of the top rect element so that the rect element below shows through.</p>
  
  <p>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>
  
  <p>I hope that's not too confusing. :P</p>
  
  <p>Here is a quick mockup of what it should look like: <a href="http://forboden.com/coding/s1.png" rel="noreferrer">http://forboden.com/coding/s1.png</a></p>
  
  <p>Here is my code: <a href="http://forboden.com/coding/svgClipTest.html" rel="noreferrer">http://forboden.com/coding/svgClipTest.html</a></p>
  
  <p>Where am I going wrong here?</p>