4

マウスイベントを監視するSVGにJavaScriptがあり、マウス座標をSVGの空間で実際の座標に変換する必要があります（viewBoxおよびその他の変換を使用）。

このコードはWebKit/Geckoブラウザーで機能します。

function transformEventCoordsToNodeCoords(evt,node)
{
  var point = document.documentElement.createSVGPoint();
  point.x = evt.clientX;
  point.y = evt.clientY;

  var ctm = node.getScreenCTM();
  return point.matrixTransform(ctm.inverse());
}

IE 9では、getScreenCTM（）は例外をスローします。

Unexpected call to method or property access.

私のコードが正しいことを示唆するサンプルコードをオンラインで見つけました。まったく同じ手法を使用しているように見え、IE9で機能するSVGも見つけました。

私のコードが失敗する理由を誰かが知っていますか？

注：node変数は<rect>：です。

<rect id=​"tooltip_box" x=​"698.7705078125" y=​"278.19676208496094" rx=​"20" ry=​"20" width=​"310" height=​"165" class=​"tooltip_box_region_level_1">​&lt;/rect>​

PS：このSVGを公的にアクセス可能なサーバーにアップロードするのは難しいでしょう。

4

1 に答える 1

9

問題が見つかりました。

getScreenCTM()IE 9 では、親ノードが であるノードを呼び出すことはできませんdisplay: none;。

照会されているノードが である場合、display: none;を呼び出しgetScreenCTM()ても問題ありませんが、隠し要素の子ノードで呼び出すことはできません。

私の回避策は、を呼び出す前にからdisplay: none;に切り替え、すぐに に戻すことでした。opacity: 0;getScreenCTM()display: none;

于 2012-05-24T04:56:33.200 に答える