Skalierung Svg Pfade in Raphael 2.1

Question

Ich benutze SVG-Pfade von einer Wikimedia Commons Karte der USA. Ich habe Pennsylvania mit seinen Grafschaften ausgesondert. Ich füttere die Pfade aus einer Datenbank und verwende Raphael 2.1, um sie auf die Seite zu setzen.

Weil in der ursprünglichen Karte, Pennsylvania war so klein und in einem Winkel eingestellt, möchte ich die Pfade vergrößern und Pa drehen, so dass es nicht auf einem Winkel ist.

Wenn ich versuche, Raffaels Transformationsmethode zu verwenden, sehen alle Grafschaften seltsam aus und überlappen sich.

Ich habe aufgegeben, die ViewBox zu setzen, als ich hörte, dass es nicht in allen Browsern funktioniert.

Wer hat irgendwelche Ideen?

Hier ist mein 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 

Answer 1

Sie möchten vielleicht die setViewBox Abhilfe versuchen here erwähnt (für IE8 und älter). Alle anderen Browser sollten vollständig mit setViewBox umgehen können.