私は、一連のデータに基づいてさまざまな州に色を付けて動的に生成された米国の地図を含む Web プロジェクトに取り組んでいます。
この SVG ファイルは、米国の優れた空白の地図を提供し、各州の色を非常に簡単に変更できます。問題は、IE ブラウザが SVG をサポートしていないことです。そのため、svg が提供する便利な構文を使用するには、JPG に変換する必要があります。
理想的には、GD2 ライブラリのみでこれを行いたいのですが、ImageMagick も使用できます。これを行う方法がまったくわかりません。
米国の地図上の州の色を動的に変更できるソリューションが検討されます。重要なのは、その場で色を簡単に変更できることと、クロスブラウザーであることです。PHP/Apache ソリューションのみでお願いします。
あなたがこれを尋ねたのはおかしいです、私は最近私の仕事のサイトのためにこれをやったばかりで、チュートリアルを書くべきだと思っていました... ImageMagickを使用するPHP/Imagickでそれを行う方法は次のとおりです:
$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);
/*loop to color each state as needed, something like*/
$idColorArray = array(
"AL" => "339966"
,"AK" => "0099FF"
...
,"WI" => "FF4B00"
,"WY" => "A3609B"
);
foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
$svg = preg_replace(
'/id="'.$state.'" style="fill:#([0-9a-f]{6})/'
, 'id="'.$state.'" style="fill:#'.$color
, $svg
);
}
$im->readImageBlob($svg);
/*png settings*/
$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); /*Optional, if you need to resize*/
/*jpeg*/
$im->setImageFormat("jpeg");
$im->adaptiveResizeImage(720, 445); /*Optional, if you need to resize*/
$im->writeImage('/path/to/colored/us-map.png');/*(or .jpg)*/
$im->clear();
$im->destroy();
ステップの正規表現の色の置換は、svg パス xml と、ID と色の値の保存方法によって異なる場合があります。サーバーにファイルを保存したくない場合は、画像をbase 64のように出力できます
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
（クリア/デストロイを使用する前に）ただし、PNGをbase64として使用すると問題があるため、おそらくbase64をjpegとして出力する必要があります
前の雇用主の販売地域マップに対して私が行った例をここで見ることができます:
開始: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg){kind=spacer}
終了：
編集
上記を書いて以来、私は2つの改善されたテクニックを思いつきました:
1) 塗りつぶしの状態を変更するための正規表現ループの代わりに、CSS を使用して次のようなスタイル ルールを作成します。
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
imagick jpeg/png の作成に進む前に、単一のテキスト置換を実行して、css ルールを svg に挿入できます。色が変わらない場合は、css をオーバーライドするパス タグにインライン フィル スタイルがないことを確認してください。
2) 実際に jpeg/png 画像ファイルを作成する必要がない場合 (および古いブラウザーをサポートする必要がない場合) は、jQuery を使用して svg を直接操作できます。img または object タグを使用して svg を埋め込む場合、svg パスにアクセスできないため、次のように Web ページ html に svg xml を直接含める必要があります。
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
次に、色の変更は次のように簡単です。
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>
SVG を透過 PNG に変換するときは、これを BEFORE にすることを忘れないでください$imagick->readImageBlob():
$imagick->setBackgroundColor(new ImagickPixel('transparent'));
IE は SVG をサポートしていないため、これを行っているとのことです。
幸いなことに、IEはベクター グラフィックスをサポートしています。そうですね、SVG ではなく、IE だけがサポートする VML という言語の形式ですが、そこにあり、使用できます。
Google マップなどは、ブラウザーの機能を検出して、SVG と VML のどちらを提供するかを決定します。
次に、Javascript ブラウザベースのグラフィック ライブラリであるRaphael ライブラリがあり、これもブラウザに応じて SVG または VML のいずれかをサポートします。
役立つかもしれない別のもの：SVGWeb。
つまり、ビットマップ グラフィックスに頼らなくても IE ユーザーをサポートできます。
たとえば、この質問に対するトップの回答も参照してください: XSL Transform SVG to VML
これは非常に簡単です。ここ数週間、これに取り組んできました。
Batik SVG Toolkitが必要です。ファイルをダウンロードして、JPEG に変換する SVG と同じディレクトリに配置します。また、最初に必ず解凍してください。
ターミナルを開き、次のコマンドを実行します。
java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 NAME_OF_SVG_FILE.svg
これにより、SVG ファイルの JPEG が出力されます。本当に簡単です。ループに入れて大量の SVG を変換することもできます。
import os
svgs = ('test1.svg', 'test2.svg', 'etc.svg')
for svg in svgs:
os.system('java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 '+str(svg)+'.svg')
スタンドアロンの PHP / Apache ソリューションについては知りません。これには、SVG 画像を読み取ってレンダリングできる PHP ライブラリが必要になるためです。そのようなライブラリが存在するかどうかはわかりません-何も知りません。
ImageMagickは、コマンド ラインまたは PHP バインディングIMagickのいずれかを使用して SVG ファイルをラスタライズできますが、このフォーラム スレッドなどで示されているように、多くの癖と外部依存関係があるようです。それは今でも最も有望な方法だと思います。
Raphaël—JavaScript Libraryを使えば簡単に実現できます。IEでも動きます。