Hover efekt na elementach grupy SVG

Question

Proszę wybaczyć mojej niewiedzy, SVG jest dla mnie bardzo nowa. Próbuję uzyskać efekt najechania na grupę elementów w moim wewnętrznym SVG. Każda grupa elementów jest ściśle umiejscowionym zbiorem okręgów. Efekt ten można osiągnąć za pomocą css, ale oczywiście działa to tylko wtedy, gdy mysz znajduje się nad kółkiem. To, czego chcę, to efekt działania, gdy mysz znajduje się nad całym obszarem zawierającym okręgi, więc połączone są spacje i okręgi.

<style> 
svg { 
    height: 220px; 
    width: 400px; 
    background: grey; 
} 

.na circle, 
.as circle { 
    fill: white; 
} 

.na:hover circle { 
    fill: blue; 
} 
</style> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g class="na"> 
    <circle cx="35%" cy="2.85%" r="2.8" /> 
    <circle cx="36.75%" cy="2.85%" r="2.8" /> 
    . 
    . 
    <circle cx="38.5%" cy="8.55%" r="2.8" /> 
    <circle cx="40.25%" cy="8.55%" r="2.8" /> 
    </g>  
</svg> 

http://jsfiddle.net/c3EaX/

Zobacz podczas przesuwania myszy nad grupą W hover migocze jak przejść między koła i przestrzeni między nimi.

Jak można uzyskać efekt myszy, aby pokryć cały obszar objęty grupą? Czy istnieje element SVG, który można wykorzystać do tego?

Answer 1

Musisz przykryć brakujący obszar.

łatwiejszy sposób byłoby to jedno:

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

updated fiddle

Answer 2

Przyjęte rozwiązanie nie działa dla mnie. Znalazłem następujące rozwiązanie: