title: SVG shape transparency with solid color as a background
body: <p>I have an svg container which I used as a background, and inside it a circle is drawn</p>
  
  <p>basically, this is what I've done:</p>
  
  <pre><code>&lt;svg width="200" height="200" style="background-color:green"&gt;
      &lt;circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="transparent" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>it creates something like <a href="http://jsfiddle.net/y259kcjy/" rel="noreferrer">this</a></p>
  
  <p>You can see the circle is transparent but it still has the green background from the svg tag,
  how can I make the circle really transparent so it can appear as a hole (in this case it will be white since the page background is white), to make it clear this is what I want to display:
  <img src="https://i.stack.imgur.com/9yMw8.jpg" alt="enter image description here"></p>
  
  <p>Is there any way that can make this happen?</p>