title: Hide part of shape with transparency?
body: <p>Is there a way to hide part of what you have drawn in SVG without drawing over it with another shape?</p>
  
  <p>For example, I'm trying to create a empty circle with a slice cut out of one part. I was able to achieve the look I wanted but the image isn't transparent on the slice I want to hide. If I change the background color of the page it's on, I'd have to change the color of the rect as well.</p>
  
  <p>I've looked into SVG clipping but it looks like that is for hiding what's outside of an area while I'm looking to do the inverse. Am I going about this the wrong way?</p>
  
  <p><img src="https://i.stack.imgur.com/Ie6fs.png" width="60"></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-html lang-html prettyprint-override"><code>&lt;svg width="60" height="60"&gt;
    &lt;circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" /&gt;
    &lt;rect height="8" width="22" y="26" fill="lightblue"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>