3

我正在使用来自美国 wikimedia commons 地图的 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
4

1 回答 1

1

您可能想尝试这里提到的 setViewBox 解决方法（适用于 IE8 和更早版本）。所有其他浏览器都应该完全能够处理 setViewBox。

于 2012-04-10T06:55:06.727 回答