2012-04-09 15 views
3

私は米国のウィキメディアコモンズマップのSVGパスを使用しています。私はその郡とともにペンシルベニア州を選んだ。私は、データベースからパスを供給し、Raphael 2.1を使ってそれらをページに配置しています。Raphael 2.1のsvgパスのスケーリング2.1

ペンシルバニアはとても小さくて斜めに設定されていたので、パスを拡大してPaを回転させて斜めにならないようにしたいと思います。

ラファエルの変換方法を使用しようとすると、すべての郡が奇妙に見えて重なってしまいます。

すべてのブラウザで動作しないと聞いてviewBoxを設定することを断念しました。

誰もが考えている?あなたは回避策はhereを述べたsetViewBoxをしようとする場合があります

$(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 

答えて

1

(IE8用と古い):

は、ここに私のコードです。他のすべてのブラウザは、setViewBoxを完全に処理できる必要があります。

+0

最新のスレッドは[こちら]です(https://github.com/DmitryBaranovskiy/raphael/issues/468) – seixasfelipe