title: Is it possible to invert the clipping of SVG?
body: <p>I have a rectangle on an SVG element. I then want to draw another rectangle over the whole SVG area <em>except</em> the rect I've already drawn.</p>
  
  <p>I thought masks might be a solution but they seem to act just like clipping - doing the <em>inverse</em> of what I want. I've tried this:</p>
  
  <pre><code>&lt;svg id="mySVG" width="600" height="250"&gt;
      &lt;defs&gt;
          &lt;mask id="myMask" x="0" y="0" width="600" height="250" &gt;
              &lt;circle cx="25" cy="25" r="25" fill="white"/&gt;
          &lt;/mask&gt;
      &lt;/defs&gt;
  
      &lt;rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>So what I'm after is the inverse of this image.</p>