5
私はsvgマウス座標に関する質問を以前ここで聞いてきましたが、私は現在の動作に疑問を抱いています。SVGマウス座標をキャプチャする
I座標を捕捉するための使用方法：問題はSVGにマウスクリックの座標変換である
var pt = svg.createSVGPoint(); // Created once for document
function alert_coords(evt) {
pt.x = evt.clientX;
pt.y = evt.clientY;
// The cursor point, translated into svg coordinates
var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse());
console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");
}
はユーザ空間座標。座標を使用して、画面上で矩形をドラッグしています。カーソルがsvg空間の右側に行くほど、座標はますます歪んでいきます。これを簡単な方法でテストするために、（100,500）、（500,500）、（1000,500）、（1000,200）のグローバルSVG空間に3つの長方形を配置します。 （98、473）、（487、470）、（969、471）、（969、190）は、単純なロギング機能を使用して、受信した座標（マウスの不正確さのプラスまたはマイナス5）です。あなたはx軸またはy軸に沿ってさらに遠くを見ることができるように、マウスが行くほど、それはより不正確になります。私はこれをマウスの座標をキャプチャするための同じメソッドを使用してフィーデルで再現しようとしましたが、私はそこにそれを複製することはできません...重要なことに注意するもう一つの事実は、および高さは、ビューボックス値よりもわずかに小さい値に設定されます。 viewboxの値が "0 0 1400 700"の場合、幅は1380、高さは676です。とにかく、ここではフィドルです、私のプログラムにあるすべてのsvgプロパティは同じです。