I'm using SVG paths from a wikimedia commons map of the US. I've singled out Pennsylvania with its counties. I'm feeding the paths out of a database and using Raphael 2.1 to put them on the page.

Because in the original map, Pennsylvania was so small and set at an angle, I'd like to scale up the paths and rotate Pa. so that it isn't on an angle.

When I try to use Raphael's transform method, all the counties look strange and overlapped.

I gave up on setting the viewBox when I heard that it doesn't work in all browsers.

Anyone have any ideas?

Here is my code:

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