SVG rect上にカーソルを置く方法は？

Question

バーの上にマウスを移動すると、SVGのこの部分（FF 8、Safari 5.1.2、Chrome 16、Macのすべてで試されました）では、ブラウザ上でマウスオーバー/それは時々それdoesntを動作します。しかし、それはすべてのブラウザで一貫しているので、おそらくSVGコードに関するものです。 onmouseoverとonmouseoutを使用すると、同じ結果が得られます。正しく動作しません。

SVG rectアングルのホバーで実装する正しい方法は何でしょうか？

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" version="1.1" style="display:inline"> 

<style type="text/css"> 
.bar { 
    fill: none; 
} 
.bar:hover { 
    fill: red; 
} 
</style> 
    <g> 
    <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" /> 
    </g> 
</svg> 

Answer 1

だけの追加、塗りつぶしが 'どれも' ではないため、マウスイベントが検出されていないということです。

.bar { 
    fill: none; 
    pointer-events: all; 
} 

これでうまくいきます。

Answer 2

不透明にしてください。

---

また、 <style>は <svg>外に行く必要があります。