SVG onmouseover/hoverは動作しません

Question

私はSVGイメージを持っていますが、その上にマウスを置くと色を変える必要があります。

https://jsfiddle.net/o8ufaL0h/

しかし、私のWebページ上で、私はホバー得ることができないかのonmouseover単一rects上で動作するように：jsfiddleコードでは正常に動作します。しかし、私はonmouseoverをhtmlコードの中から完全なimg要素に置いてもうまくいきますので、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

は

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

（ジャバスクリプト付き）または

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