Scaling SVG Paths in Raphael 2.1

I am using SVG routes from the US wikimedia map. I have highlighted Pennsylvania with its districts. I am feeding the paths from a database and using Raphael 2.1 to place them on the page.

Since Pennsylvania was so small and angled in the original map, I would like to zoom in on the paths and rotate Pa. so that it is not at an angle.

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

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

Does anyone have any idea?

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