title: View the inverse region of clip-path
body: <p>This is a simple fiddle that displays a circular region inside a rectangle
  <a href="https://jsfiddle.net/3v6yhf0m/" rel="noreferrer">https://jsfiddle.net/3v6yhf0m/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    border: 3px dashed #999;
  }
  svg &gt; rect:hover {
    fill: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
      &lt;clipPath id="myClip"&gt;
        &lt;circle cx="30" cy="30" r="20"/&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  
    &lt;rect x="10" y="10" width="100" height="100" fill="blue"
        clip-path="url(#myClip)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I want to view the region of rectangle that lies outside the circle using clip-path
  <a href="https://jsfiddle.net/yhbeevya/" rel="noreferrer">https://jsfiddle.net/yhbeevya/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    border: 3px dashed #999;background-color:blue;fill:blue;
  }
  svg &gt; rect:hover {
    fill: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
      &lt;clipPath id="myClip"&gt;
        &lt;circle cx="30" cy="30" r="20"/&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  
    &lt;rect x="10" y="10" width="100" height="100" fill="white"
        clip-path="url(#myClip)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please share your ideas</p>