Wie konvertiere ich eine SVG-US-Karte in JPG für browserübergreifende Kompatibilität?

SVG in JPG für eine browserübergreifende kompatible US-Karte konvertieren

Stellen Sie sich vor, Sie arbeiten an einem Webprojekt, das eine dynamische Karte der Vereinigten Staaten enthält mit Farben, die Daten darstellen. Diese SVG-Datei bietet einen fantastischen Ausgangspunkt, aber IE-Browser verfügen nicht über SVG-Unterstützung. Um dieses Problem zu lösen, können wir entweder PHP/GD2 oder PHP/ImageMagick nutzen, um die SVG-Karte in ein JPG-Format zu konvertieren.

Verwendung der Imagick-Bibliothek

1. Importieren die Imagick-Bibliothek und laden Sie den Inhalt der SVG-Datei in eine $svg-Variable.
2. Definieren Sie ein Array ($idColorArray) Ordnen Sie Zustandsabkürzungen Hex-Farbwerten zu.
3. Verwenden Sie eine Schleife, um die Zustandsfarben anzuwenden, indem Sie die ursprünglichen Füllwerte mithilfe eines regulären Ausdrucks durch die gewünschten Hex-Werte ersetzen.
4. Erstellen Sie ein Imagick-Objekt, lesen Sie Fügen Sie den geänderten SVG-Inhalt ein und geben Sie die gewünschte Ausgabebildgröße an.
5. Konfigurieren Sie das Bildformat (z. B. „png24“ für PNG, „jpeg“ für JPG) und passen Sie die Bildgröße nach Bedarf an.
6. Schreiben Sie das resultierende Bild in eine Datei oder geben Sie es als Base64-String für die Inline-Anzeige aus.

Zusätzliche Überlegungen

• Mit CSS können Sie Stilregeln für die einzelnen Zustände definieren, was die Farbänderung vereinfacht Prozess.
• Wenn Dateierstellung und breite Browserunterstützung nicht erforderlich sind, können Sie erwägen, das SVG direkt mit jQuery zu bearbeiten.

Beispiel

Der folgende Codeausschnitt konvertiert die SVG-Karte mit Imagick in das PNG-Format:

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

// State color array
$idColorArray = array(
     "AL" => "339966",
    ,"AK" => "0099FF",
    ...
    ,"WI" => "FF4B00",
    ,"WY" => "A3609B"
);

// Update SVG with state colors
foreach($idColorArray as $state => $color){
    $svg = preg_replace(
         '/id="'.$state.'">

Das obige ist der detaillierte Inhalt vonWie konvertiere ich eine SVG-US-Karte in JPG für browserübergreifende Kompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!