Забавно, что вы спросили об этом, я недавно сделал это для сайта своей работы и подумал, что мне следует написать учебник ... Вот как это сделать с помощью PHP / Imagick, который использует ImageMagick:
$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();
этапы замены цвета регулярного выражения могут различаться в зависимости от XML-пути svg и того, как хранятся ваши значения идентификатора и цвета.Если вы не хотите сохранять файл на сервере, вы можете вывести изображение в формате 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)
Finish: 
Редактировать
С момента написания вышеизложенного я придумал 2 улучшенных метода:
1) вместо цикла регулярных выражений, чтобы изменить состояние заполнения, используйте CSS для создания правил стиля, таких как
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
, а затем вы можете сделать одну замену текста, чтобы вставить ваши правила CSS в SVG перед тем, как продолжитьсоздание Imagick JPEG / PNG.Если цвета не меняются, убедитесь, что у вас нет встроенных стилей заливки в ваших тегах пути, перекрывающих CSS.
2) Если вам не нужно создавать jpeg / pngфайл изображения (и не нужно поддерживать устаревшие браузеры), вы можете напрямую управлять svg с помощью jQuery.Вы не можете получить доступ к путям svg при встраивании svg с помощью img или тегов объекта, поэтому вам нужно будет напрямую включить svg xml в html вашей веб-страницы, например:
<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>