Hover effect on SVG group elements

You need to put something to cover the missing area.

The easier way would be this one:

.na circle,
.as circle {
    fill: white;
    stroke: transparent;
    stroke-width: 4px;
}

updated fiddle

The accepted answer didn't work for me. I found the following solution:

g {
  pointer-events: bounding-box;
  opacity: 0.4;
}
g:hover {
    opacity: 1;
}

Use pattern

For the solution, you can use pattern which is based on a single circle.

In this case, you do not need to draw a lot of circles to fill the shape.

Difficulties arise when coloring clones of a circle when filling the figure of the SVG pattern.

But it is possible to solve the problem by animating the coloring of the circles inside the pattern.

<animate attributeName="fill" values="white;dodgerblue" begin="path1.mouseover" dur="0.1s" fill="freeze" />

<style>
#ptn1 {
fill:dodgerblue;
}
</style>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="200" height="200" viewBox="0 0 100 100" >  
<defs>
<pattern id="ptn1"   
  x="0" y="0" width="5" height="5"
  patternUnits="userSpaceOnUse">
<circle cx="3" cy="3" r="2" fill="none" stroke="grey" stroke-width="0.5" >
  <animate attributeName="fill" values="white;dodgerblue" begin="path1.mouseover" dur="0.3s" fill="freeze" />
   <animate attributeName="fill" values="dodgerblue;white" begin="path1.mouseout" dur="0.3s" fill="freeze" />
 </circle>
</pattern>
</defs>		 

<path id="path1" d="m10 50 v-5h5 v-5h5 v-5h5 v-5h5 v-5h5 v5h5 v5h5 v5h5 v5h5 v5h-45 "  stroke="none" fill="url(#ptn1)" />
</svg>

The answers by @vals and @M_Willett won't work in Firefox v60.0.2 in MacOs (High Sierra). I'm using:

g {
  pointer-events: bounding-box;
}

In Chrome and it works perfectly. Tried the answer by @vals as well and that doesn't work in Firefox either.