Question

我正在使用来自美国维基媒体公共地图的SVG路径。我已经把宾夕法尼亚州的县列出来了。我正在从数据库中提取路径并使用Raphael 2.1将它们放在页面上。

因为在原始地图中，宾夕法尼亚州是如此之小并且设置成一个角度，我想扩大路径并旋转Pa。以便它不是一个角度。

当我尝试使用Raphael的变换方法时，所有的县看起来都很奇怪并重叠。

当我听说它在所有浏览器中都不起作用时，我放弃了设置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。

在Raphael 2.1中缩放svg路径

1 个答案: