A mask is what you want. To create a <mask>
, make things you want to keep white. The things you want to be invisible make black. Colours in between will result in translucency.
So the resulting SVG is similar to your pseudo-markup and looks like this:
<div style="background: #ddf">
<svg width="200" height="200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<circle r="50" cx="100" cy="100" fill="black"/>
</mask>
</defs>
<circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />
</svg>
</div>
We are filling the mask with a white rectangle, and then we put a black circle where we want the hole to be.