3

私がする必要があるのは、マウスがSVGオブジェクトを離れるかどうかを理解することです(パス、つまり、長方形ではありません-円形ではなくオフセットだけを使用できません-半径と中心位置などを使用できません)。常にすべての要素の上にあるマウスのポインターがあるため、マウスの leave/enter イベントを使用できません。明らかに、elementFromPoint だけを使用することもできません。これは、最上層の要素を提供するためです。

質問: 座標 (X,Y) が特定の要素 $("#element") にあるかどうかを理解する方法はありますか。

更新:

現在のコードを自分の Web サイトhttp://pekap.co/example/にアップロード しました。ebmed する SVG オブジェクトがあるため、jsfiddle を作成しませんでした。そこでは、私の JS、私が使用している svg オブジェクトなどを見つけることができます。

svg オブジェクトに移動すると、色が変わり、ポインターが表示されます (オレンジ色の円)。目標は、SVG エリアを出る/入るたびに SVG エリアの色を変更し、SVG エリア内でのみマウスの下にオレンジ色の円を表示することです。

現在、私は目標の1つ（コードが異なるもの）で達成できます

更新 2。

Erik Dahlström は、ほぼ完璧な解決策を提供してくれました: CSS で pointer-events を none に設定します。私は今これに行きますが、私の一日を完璧にするために、円の一部がSVG領域の外にあることを検出する方法があれば素晴らしいでしょう.

4

2 に答える 2

1

私はあなたが何を意味するかわかりません.ポインタはマウスに続く小さな円ですか?

その場合は、その円を作成するだけで、pointer-events: noneマウス イベントに対して「透明」になります。webkit/safari/chrome/blink はまだサポートmouseenterされていないため、mouseleaveスクリプトベースの回避策が必要になる可能性が高いことに注意してください (D3 が既にこれを行っているかどうかはわかりません)。

:hoverパス要素でCSS ルールを使用することに基づいて解決策を実行することも可能です。ホバー時にいくつかのプロパティを何らかの値にgetComputedStyle設定し、パス要素でプロパティが現在設定されているものを確認します。

于 2013-05-15T11:21:27.140 に答える
1

私の提案は、その地域のイメージマップを作成することです.それは大変な作業ですが、これはあなたが必要としているもののようです: http://jsfiddle.net/sb9j7/

<area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">

このフィドルはイメージマップスターからのものです

于 2013-05-15T09:26:46.540 に答える