先日、SVGの要素 (rect) にCSSで:hoverを利用して内部の色が変わるように設定したところ、カーソル (マウスポインター) を要素の上にかざしても反応しないという現象に遭遇しました。全く反応しないわけでもなく、たまに反応する場合もありました。原因を調べたところ、SVGの要素の style に fill:none を設定すると、hoverが利かないということがわかりました。(FirefoxとEdgeで確認しました。)

下のSVGがその例です。

左の正方形がfill:noneを設定しているものです。マウスを正方形の中に移動させても反応しないのがわかります。ただ、全く反応しないのではなく、反応する場合もあります。特に、枠線のあたりにマウスを持っていくと反応することもあります。

真ん中の正方形が同じくfill:noneを設定して、枠線を太くしたものです。ほぼ問題なく反応することがわかります。反応しない場合もあります。

枠線を太くせずに、正方形の内部を透明にして :hover を使いたい場合は、fill:none にせずに、fill-opacity: 0 として、透明な色で塗り潰すようにします。また、:hover の設定で fill-opacity: 1 として不透明にする必要があります。そのように設定したのが一番右の正方形です。

今回の例では SVG の rect を使用しましたが、circle などでも同様でした。