Make SVG element transparent (like a mask)

Question

How can I use the polygon as a mask, which will make the area in the circle transparent? I cannot manage it

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
    <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50"/>
</svg>

Answer 1

Masks are quite simple. They are described here: http://www.w3.org/TR/SVG11/masking.html#Masking

In your case, it is just a matter of adding a few lines.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

   <circle cx="50" cy="50" r="50" mask="url(#hole)"/>
        
   <mask id="hole">
      <rect x="0" y="0" width="100" height="100" fill="white"/>
      <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50" fill="black"/>
   </mask>
</svg>

In the mask definition, we have to add a white rectangle the size of the circle to make the <circle> visible (white means opaque), and we make the <polygon> black (transparent) to create the hole.

Fiddle here