クリックしてsvg座標

Question

私はズーム方法があり、より小さなサイズのdivに含まれているsvgマップを持っています。私は場所のすべての名前をドロップボックスがあり、クリックすると、div内のsvgマップが特定のxとy座標に移動します。 私はこれをずっとやろうとしてきましたが、そうすることができないようです。私は、ビューボックスと変換プロパティを混乱させようとしましたが、彼らはすべて、svgをカットしています。

提案がありますか？

Answer 1

あなたはsvg-pan-zoomのようなものを使用することができます

var panZoom = window.panZoom = svgPanZoom('#svgid', { 
    zoomEnabled: true, 
    controlIconsEnabled: true 
}); 

panZoom.pan({x:0,y:0}); 

var realZoom= panZoom.getSizes().realZoom; 

panZoom.pan 
({ 
    x: -(1000*realZoom)+(panZoom.getSizes().width/2), 
    y: -(500*realZoom)+(panZoom.getSizes().height/2) 
}); 

1000は、SVGのwidthで、500はheightです。また、あなたが必要なら2であなたはdevidで遊ぶことができます。