How to do transparent circle on SVG image? - css

Question

I'm working on SVG game like Worms, but i don´t know how to do SVG terrain. I have created bitmap with logic ( when a bullet hits terrain, it makes crater). And now i got idea i give SVG terrain (img) on bitmap and everytime the bullet hits terrain, it draws svg circle. I know how to do svg circle, but i can´t see background, because the circle hides my background.
So my question is: How can i make transparent circle on SVG image ?
This is what i did https://imgur.com/a/bPHjthi
This is what i want
https://imgur.com/a/ZT54RxI but SVG.
Thanks for help

Answer 1

You can control the background of an svg circle with the fill property, see here. But I'm not sure setting fill: none or fill: transparent is going to achieve what you want, you would simply see the green background trough the circle. So to "cut" out a circle from the green part you would need to use a clipPath, see here;

Answer 2

For this I would use clipPath. In order to clip a circle out of the polygon you will need a path: a rectangle as big as the svg canvas with a circular hole in it:
<svg viewBox="0 0 100 100" width="300">
<path d="M0,0h100v100h-100v-100M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</svg>
The path is builded out of a rect: M0,0h100v100h-100v-100M60,50 drawn clockwise and a circle drawn counterclockwise. For a circle with a radius of 10 and the center in the {x:50,y:50} you would do something like this: M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0.
Next you use this path as a clipping path to perforate the polygon:
svg{border:1px solid;background:gold}
<svg viewBox="0 0 100 100" width="300">
<clipPath id="clip">
<path d="M0,0h100v100h-100v-100
M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</clipPath>
<polygon points="0,90 70,30 100,80 100,100 0,100" clip-path="url(#clip)" />
</svg>
If you need to cut several circles out of the polygon you need to change the d attribute for the clipping path by adding a new circle like so:
d="M0,0h100v100h-100v-100
M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0
M40,60a10,10 0 0 0 -20,0a10,10 0 0 0 20,0"
And this is a demo:
svg{border:1px solid;background:gold}
<svg viewBox="0 0 100 100" width="300">
<clipPath id="clip">
<path d="M0,0h100v100h-100v-100
M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0
M40,60a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</clipPath>
<polygon points="0,90 70,30 100,80 100,100 0,100" clip-path="url(#clip)" />
</svg>

Answer 3

To draw a transparent circle in svg you should use the command circle attribute fill=none like this:
<svg viewbox "0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<view id="one" viewBox="0 0 200 200" />
<circle cx="100" cy="100" r="40" stroke="red" stroke-width="5" fill=none />
<circle cx="100" cy="100" r="60" stroke="blue" stroke-width="5" fill=none />
</svg>