无法在圆圈上设置悬停事件的样式

Question

在我的DOM中，我有：

<g transform="translate(0,200)" id="annotations">
  <g class="annotation">
    <circle r="10" cx="150" cy="50" style="opacity: 1;">
    </circle>
  </g>
  <g class="annotation">
    <circle r="10" cx="100" cy="10" style="opacity: 1;">
    </circle>
  </g>
</g>

在我的CSS中我有：

 #annotations circle {
         fill: rgb(255,0,0);
 }
 #annotations circle:hover {
         fill: rgb(0,0,0);
 }

圆圈正确显示为红色，但:hover伪类不起作用。事实上，样式声明甚至没有出现在Chrome开发工具中。当我将没有伪类的前一个声明更改为开发工具中带有伪类的声明时，声明将变为灰色（无效）。这有什么不对？我认为可以像这样设计svg elemens。