枠線で囲まれたdiv内にマウスが入った際に、マウス下にある要素名を返します。
(MouseEvent の toElement.localName の値を拾っています)
角錐では側面の三角形を描画するとどうしてもsvg上に余白ができます。
この図形にマウスが乗っていることを判定して・3D回転させようとするときなど、「いまマウスがいる場所は図形の上か」の判定が、少し難しそうです。
- 右(あるいは下)の四角形は、svg要素の全域にrectを描画しており余白がない
- 左(あるいは上)の四角形は、svgの中にpolygonやrectを描画しており余白がある
余白ありの方では、polygonやrectの上でもsvgが検出される箇所があり、また図形外の余白部分でもsvgとして反応する箇所があります。
余白なしの方では、全面がrectとしてひろわれています。
↓以下はtoElement.localNameを表示する部分のソースサンプルです。
▼JavaScript