Bunu sordunuz komik, bunu yakın zamanda işimin sitesi için yaptım ve bir eğitim yazmam gerektiğini düşünüyordum ... İşte ImageMagick kullanan PHP / Imagick ile nasıl yapılacağı:
$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();
regex renk değiştirme adımları, svg yolu xml'ye ve id ve renk değerlerinin nasıl saklandığına bağlı olarak değişebilir. Sunucuda bir dosya depolamak istemiyorsanız, görüntüyü 64 temelde çıktısını alabilirsiniz.
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(temizle / yok et kullanmadan önce) ancak örneğin PNG ile base64 olarak sorunları var, bu nedenle muhtemelen base64'ü jpeg olarak çıktılamanız gerekir.
Burada eski bir işverenin satış bölge haritası için yaptığım bir örneği görebilirsiniz:
Başlangıç: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Bitiş:
Düzenle
Yukarıdakileri yazdığımdan beri, 2 gelişmiş teknik buldum:
1) doldurma durumunu değiştirmek için bir normal ifade döngüsü yerine, stil kuralları oluşturmak için CSS kullanın.
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
ve sonra, imagick jpeg / png oluşturmaya geçmeden önce css kurallarınızı svg'ye eklemek için tek bir metin değişikliği yapabilirsiniz. Renkler değişmezse, yol etiketlerinizde css'yi geçersiz kılan herhangi bir satır içi dolgu stiliniz olmadığından emin olun.
2) Gerçekten bir jpeg / png resim dosyası oluşturmanız gerekmiyorsa (ve eski tarayıcıları desteklemeniz gerekmiyorsa), svg'yi doğrudan jQuery ile değiştirebilirsiniz. Svg'yi img veya nesne etiketlerini kullanarak katıştırırken svg yollarına erişemezsiniz, bu nedenle svg xml'yi web sayfanızın html'sine doğrudan dahil etmeniz gerekir:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
sonra renkleri değiştirmek şu kadar kolaydır:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>