CSSのtransformで立体化した図形にonmousemoveすると、どの要素の上に乗っているかを調べる

枠線で囲まれたdiv内にマウスが入った際に、マウス下にある要素名を返します。
(MouseEvent の toElement.localName の値を拾っています)

角錐では側面の三角形を描画するとどうしてもsvg上に余白ができます。
この図形にマウスが乗っていることを判定して・3D回転させようとするときなど、「いまマウスがいる場所は図形の上か」の判定が、少し難しそうです。

  • 右(あるいは下)の四角形は、svg要素の全域にrectを描画しており余白がない
  • 左(あるいは上)の四角形は、svgの中にpolygonやrectを描画しており余白がある

余白ありの方では、polygonやrectの上でもsvgが検出される箇所があり、また図形外の余白部分でもsvgとして反応する箇所があります。
余白なしの方では、全面がrectとしてひろわれています。

↓以下はtoElement.localNameを表示する部分のソースサンプルです。

▼JavaScript

デモページは、こちら