SVG：マウスオーバーとマウスアウトイベントを正しく処理する方法は？

私は、クライアント上でインタラクティブなSVG画像を作成するために、ラファエルJSフレームワークを使用しています：SVG：マウスオーバーとマウスアウトイベントを正しく処理する方法は？

var paper = Raphael(document.getElementById("svgcontainer")); 
var path = paper.path("M0,0 L150,0 L150,150, L0,150 Z"); 

path.attr({fill: 'red'}); 

var text = paper.text(40,20, "some text"); 

path.mouseover(function(){this.attr({fill: 'green'})}); 
path.mouseout(function(){this.attr({fill: 'red'})});

ユーザーがpath要素内のテキストの上にマウスを移動した場合は、path jsfiddle例http://jsfiddle.net/6BtUk/9/

をご覧ください要素がmouseoutイベントをトリガーします。ユーザーがマウスをテキスト要素に移動したときに、path要素のmouseoutイベントのトリガーを防止する方法

出典

2012-01-03 Andrei