SVG hover event doesn't fire when sibling item in the way

I have an SVG element with multiple child items. I can easily replace the fill for a particular element on hover by looking for the :hover CSS property. But if a sibling element exists on top of the hovered element, it prevents the hover from bubbling up to other elements.

Here's an example. The circle's gradient will be replaced when hovering over the circle. But get anywhere near the text and it will revert back to the original color.

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.circ:hover { 
    fill: url(#surfaceGradientHover);
}

<!-- language: lang-html -->

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="surfaceGradient"
           cx=".6" cy="0.2" r=".8">
          <stop offset="0%" stop-color="white" />
          <stop offset="50%" stop-color="red" />
          <stop offset="100%" stop-color="maroon" />
      </radialGradient>
      <radialGradient id="surfaceGradientHover"
           cx=".6" cy="0.2" r=".8">
          <stop offset="0%" stop-color="white" />
          <stop offset="40%" stop-color="red" />
          <stop offset="80%" stop-color="maroon" />
      </radialGradient>
  </defs>

  <circle class="circ" cx="150" cy="100" r="80"
          fill="url(#surfaceGradient)" />

  <text x="150" y="125" font-size="50" 
         text-anchor="middle" fill="white" 
         transform="translate(-10,5)rotate(-5)">
             easy
  </text>

</svg>

<!-- end snippet -->

One solution is to group the circle and text.

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.shape:hover .circ {
  fill: url(#surfaceGradientHover);
}
.shape {
  cursor: pointer;
}

<!-- language: lang-html -->

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="surfaceGradient" cx=".6" cy="0.2" r=".8">
      <stop offset="0%" stop-color="white" />
      <stop offset="50%" stop-color="red" />
      <stop offset="100%" stop-color="maroon" />
    </radialGradient>
    <radialGradient id="surfaceGradientHover" cx=".6" cy="0.2" r=".8">
      <stop offset="0%" stop-color="white" />
      <stop offset="40%" stop-color="red" />
      <stop offset="80%" stop-color="maroon" />
    </radialGradient>
  </defs>
  <g class="shape">
    <circle class="circ" cx="150" cy="100" r="80" fill="url(#surfaceGradient)" />
    <text x="150" y="125" font-size="50" text-anchor="middle" fill="white" transform="translate(-10,5)rotate(-5)">
      easy
    </text>
  </g>
</svg>

<!-- end snippet -->