パンとズーム後のクリック時のSVG座標

Question

私は愚かなことをブロックしていますが、クリックするとSVG座標を探しています。しかし私のSVGはズームして動かすことができます。

この例では、より多くの話をすると思う：

http://blockbuilder.org/Servuc/36931fc3950218df024d0aa7ff8c8d3c

私は黒丸の下の座標を求めています。 重要：：私の場合は、黒い円はちょうど位置の指示にすぎず、SVGのどこかをクリックすると表示されます。

私はそれを読んだ：D3 click coordinates after pan and zoomしかし、それは私を助けませんでした。

EDIT：黒い円が左側にある場合、XとYを取得し、黒い円を右に移動します。同じYを取得します。Y 良いコーディングの日をお過ごしください。

Answer 1

これは単に...

まず、あなたには、いくつかの情報を取得する必要がありそうだった。

• SVG.getScreenCTM（）
• 翻訳XとY
• スケール
を
• クライアントのクリック座標（d3.event.pageXおよびd3.event.pageY ）

重要：;：/.*translate\((-?\d+(.\d+)?),(-?\d+(.\d+)?)\)(scale\((-?\d+(.\d+)?)\))?/$1$3と$6とparseFloatは使用、ないのparseInt）

function screenToSvg(x, y, translateX, translateY, scale) { 
    var myScreenCTM = $("svg")[0].getScreenCTM(); 
    return { 
     x : (x - myScreenCTM.e - translateX)/scale, 
     y : (y - myScreenCTM.f - translateY)/scale 
    } 
} 

は、翻訳、スケール値、使用を取得します。