SVG onmouseover/hover不工作[复制]

Question

我有一个SVG图像，带有一些矩形，当鼠标悬停在上面时需要改变颜色。在JSFIDLE中，代码运行良好：

https://jsfiddle.net/o8ufaL0h/

但是在我的网页上，我无法使用hover或onmouseover来处理单个rect。但是，当我在html代码中为完整的img元素添加onmouseover时，它确实可以工作，所以我想这不是img元素的z索引问题。

我真的不知道为什么我不能在我的svg或css代码中瞄准svg元素。

<style>
    rect:hover
    {
        opacity: 0.5;
    }
</style>


<rect x="277" y="126" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="126" fill="#004D44" width="157" height="88"/>

<rect x="277" y="232" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="232" fill="#004D44" width="157" height="88"/>

<rect x="277" y="339" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="339" fill="#004D44" width="157" height="88"/>

</svg>

Answer 1

尝试为每个rect标记添加属性（使用javascript）

onmouseover="this.setAttribute('fill-opacity','.5')" 
onmouseout="this.removeAttribute('fill-opacity')"

或者使用css

<style>
rect:hover{
    fill-opacity:1
}
</style>