ブラウザ間の互換性を確保するために SVG US マップを JPG に変換するにはどうすればよいですか?

クロスブラウザ互換の米国地図用に SVG を JPG に変換する

米国の動的な地図をフィーチャーした Web プロジェクトで作業していることを想像してください。データを表す色を使用します。この SVG ファイルは素晴らしい出発点となりますが、IE ブラウザには SVG サポートがありません。これに対処するには、PHP/GD2 または PHP/ImageMagick を利用して SVG マップを JPG 形式に変換します。

Imagick Library の使用

1. インポートImagick ライブラリを使用し、SVG ファイルのコンテンツを $svg にロードします。変数。
2. 状態の略語を 16 進カラー値にマッピングする配列 ($idColorArray) を定義します。
3. ループを使用して、元の塗りつぶし値を目的の 16 進値に置き換えて状態カラーを適用します。正規表現。
4. Imagick オブジェクトを作成し、変更された SVG コンテンツをそのオブジェクトに読み込み、目的の出力画像を指定します。サイズ。
5. 画像形式 (例: PNG の場合は「png24」、JPG の場合は「jpeg」) を設定し、必要に応じて画像サイズを調整します。
6. 結果の画像をファイルに書き込むか、インライン表示用にbase64文字列として出力します。

追加考慮事項

• CSS を使用して個々の状態のスタイル ルールを定義すると、色の変更プロセスが簡素化されます。
• ファイルの作成と広範なブラウザのサポートが必要ない場合は、次を使用して SVG を直接操作することを検討できます。 jQuery.

例

次のコード スニペットは、Imagick を使用して SVG マップを PNG 形式に変換します。

$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.'">

以上がブラウザ間の互換性を確保するために SVG US マップを JPG に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。