html - 对 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

接受的答案对我不起作用。我找到了以下解决方案:

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