縮放在拉斐爾2.1 svg路徑

Question

我使用美國維基媒體共享地圖的SVG路徑。我選擇了賓夕法尼亞州的縣。我正在從數據庫中提取路徑，並使用Raphael 2.1將它們放在頁面上。

因爲在原始地圖中，賓夕法尼亞州非常小，並且以一定角度設置，所以我想放大路徑並旋轉Pa，以便它不在一個角度。

當我嘗試使用拉斐爾的變換方法時，所有的縣看起來很奇怪並且重疊。

我放棄了設置viewBox，當我聽說它不適用於所有瀏覽器。

任何人有任何想法？

這裏是我的代碼：

$(document).ready(function() { 
    var $paths = []; //array of paths 
    var $thisPath; //variable to hold whichever path we're drawing 
    $.post('getmapdata.php', 
     function(data){ 
     var objData = jQuery.parseJSON(data); 

     for (var i=0; i<objData.length; i++) { 
      $paths.push(objData[i].path); 
      //$counties.push(objData[i].name); 
     }//end for 
     drawMap($paths); 
    }) 

    function drawMap(data) { 
     // var map = new Raphael(document.getElementById('map_div_id'),0, 0); 
     var map = new Raphael(0, 0, 520, 320); 
     //map.setViewBox(0,0,500,309, true); 

     for (var i = 0; i < data.length; i++) { 
     var thisPath = map.path(data[i]); 
     thisPath.transform(s2); 
     thisPath.attr({stroke:"#FFFFFF", fill:"#CBCBCB","stroke-width":"0.5"}); 


    } //end cycling through i 



    }//end drawMap 

});//end program 

Answer 1

你可能想嘗試解決方法中提到的here setViewBox（對於IE8及以上）。所有其他瀏覽器應該完全能夠處理setViewBox。