label - Raphael JS : mouseover/mouseout - テキストラベルの問題

Question

Raphael JS を使用して、エリアとテキストラベルを含む SVG マップを作成します。マウスを上に移動すると、その領域が強調表示されます。

これで動作していますが、マウスをラベル (領域の中央) の上に移動すると、その領域のマウスアウト イベントがトリガーされるため、領域が再び強調表示されなくなります。

これが起こらないようにする方法、または回避策はありますか?

Answer 1

テキスト上に不透明度を0に設定して長方形を作成し、その長方形にイベントハンドラーをアタッチします。テキストを使用して、四角形の寸法を計算できgetBBox()ます。

Answer 2

Paper#setを使用してセットを作成する方法は、私にとってはうまくいきました。例えば：

var st = paper.set();

st.push.apply(st, vectors);  // `vectors`: my array of "hoverable" vectors
st.push(text);               // `text`:    my text vector for `vectors`

st.hover(function () {
    text.show();
}, function () {
    text.hide();
});