Эффект наведения на элементы группы SVG

Question

Прошу прощения за мое незнание, SVG для меня очень нова. Я пытаюсь получить эффект зависания для группы элементов в моем встроенном SVG. Каждая группа элементов представляет собой тесно расположенную совокупность кругов. Я могу добиться этого эффекта зависания с помощью css, но, очевидно, это будет работать только тогда, когда мышь расположена над кругом. Я хочу, чтобы эффект работал, когда мышь находится над всей областью, которая содержит круги, поэтому объемы и круги объединены.

<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/

Смотрите при перемещении мыши над группой парения мерцает, как вы идете между окружностью и пространством между ними.

Как вы могли бы получить эффект мыши, чтобы покрыть всю область, охваченную группой? Есть ли элемент SVG, который можно использовать для этого?

Answer 1

Вам нужно положить что-нибудь, чтобы покрыть недостающую область.

Легче всего было бы это:

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

updated fiddle

Answer 2

Принятый ответ не работает для меня. Я нашел следующее решение:

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