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.