jQuery矢量地圖插件：獲取國家的維度

Question

我正在使用jq-plugin矢量地圖來顯示地圖，其中突變顯示在鼠標懸停上。 當一個國家被點擊時，它應該放大它。 我的問題是，我無法找到如何獲得被點擊的國家（最小/最大x/y座標）的尺寸，以便我可以正確縮放以覆蓋可用的屏幕區域。

輸入數據從被創建的地圖是用具有下列格式元素的數組：

'lu': { 'lock':1, 'type':'country', 'name': 'Luxembourg', 'path': 'M233.7,335.91l-2.56,3.47l-1.08,5.64 c0.16,0.02,0.31,0.05,0.48,0.05c1.96-0.08,3.24-0.59,4.86,0c0.02,0.01,0.03,0.01,0.04,0.02l0.47-3.6L233.7,335.91z' } 

我沒有以往的經驗與SVG或與該插件，所以也許有一個明顯的解決方案我看不到。

對於不依賴於此jq插件的替代解決方案的建議也值得歡迎。

Answer 1

如果path是引用路徑元件然後path.getBBox()返回以下形式上的對象的變量：

{ 
    x  : ... 
    y  : ... 
    width : ... 
    height : ... 
} 

凡x和y代表左上角。對於縮放，您可以將包裝svg元素上的viewBox屬性設置爲viewBox="x y width height"。我的意思是這樣的：

svg = document.querySelector('svg'); 
path = svg.querySelector('path'); 
box = path.getBBox(); 
svg.setAttributeNS(null, 'viewBox', box.x +' '+ box.y +' '+ box.width +' '+ box.height);