点击进入svg坐标

Question

我有一张 svg 地图，我已经将其放大并包含在较小尺寸的 div 中。我有一个包含所有位置名称的下拉框，单击后我希望 div 内的 svg 地图移动到特定的 x 和 y 坐标。这么长时间以来，我一直在尝试这样做，但我似乎做不到。我试图弄乱 viewbox 和转换属性，但他们所做的只是把 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。

点击进入svg坐标

Click to go to svg coordinates

angularjs

meanjs