Пожалуйста, извините мое невежество, 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>
Смотрите, перемещая мышь над группой, наведение мерцает, когда вы проходите между кругом и пространством между ними.
Как вы могли бы получить эффект мыши, чтобы охватить всю область, охваченную группой? Есть ли элемент SVG, который можно использовать для этого?