Avoiding the aliasing / thin "bleed between touching elements

Question

I have an svg which has multiple stroked paths, and a rectangle shape behind them that has the shape of the paths cut out of them. Effectively, the stroked paths should be "plugging the holes" in the rectangle shape.

The reason for this is that I would like to animate the paths so that they are erased, revealing what is underneath through the holes in the rectangle shape.

That's all well and good, and the animation works fine. The problem is that there is a hairline-thin space between the holes and the outside of the path strokes, so you can see what is underneath even while the paths are still there. You can see a screen capture of that here:

How do I avoid this happening? The space is not in the svg, because making it bigger on the page still has the space hairline thin:

I figure it has something to do with the aliasing, but have no idea how to combat it. I can't just apply a thicker stroke to the paths, because then the stroke starts to bleed into the other shapes, as seen here:

What else is there to do?

Answer 1

You could use a mask instead of a clip-path, since masks allow using the stroke to define the masked area.

<mask id="strokemask" maskContentUnits="objectBoundingBox" 
      x="0" y="0" width="100%" height="100%">
  <circle cx="0.5" cy="0.5" r="0.1" stroke="white" fill="white" 
          stroke-width="0.02"/>
  <circle cx="0.5" cy="0.5" r="0.15" stroke="white" fill="none" 
          stroke-width="0.03"/>
  <circle cx="0.5" cy="0.5" r="0.22" stroke="white" fill="none" 
          stroke-width="0.05"/>
  <circle cx="0.5" cy="0.5" r="0.3" stroke="white" fill="none" 
          stroke-width="0.06"/>
</mask>

Here's a live example of an animated mask that uses some stroked circles.