おかしなことに、あなたがこれを尋ねたのはおかしいです、私は最近私の仕事のサイトでこれをやっただけで、チュートリアルを書くべきだと思っていました...これは、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) . '" />';?>
(clear / destroyを使用する前)しかし、つまりbase64としてのPNGに問題があるため、おそらくbase64をjpegとして出力する必要があります。
元の雇用者の販売地域マップで私が行った例をここで見ることができます:
開始:https : //upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
仕上げ:
編集する
上記を書いて以来、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タグまたはオブジェクトタグを使用して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>