Thật là buồn cười khi bạn hỏi điều này, tôi vừa mới làm điều này gần đây cho trang web công việc của mình và tôi đang nghĩ mình nên viết một hướng dẫn ... Đây là cách thực hiện với PHP / Imagick, sử dụng 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();
các bước thay thế màu regex có thể khác nhau tùy thuộc vào đường dẫn svg xml và cách bạn lưu trữ các giá trị id và màu sắc. Nếu bạn không muốn lưu trữ tệp trên máy chủ, bạn có thể xuất hình ảnh dưới dạng cơ sở 64 như
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(trước khi bạn sử dụng xóa / hủy) nhưng có vấn đề với PNG dưới dạng base64, vì vậy bạn có thể phải xuất base64 dưới dạng jpeg
bạn có thể xem một ví dụ ở đây mà tôi đã làm cho bản đồ lãnh thổ bán hàng của một nhà tuyển dụng cũ:
Bắt đầu: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
Hoàn thành: 
Biên tập
Kể từ khi viết phần trên, tôi đã nghĩ ra 2 kỹ thuật cải tiến:
1) thay vì vòng lặp regex để thay đổi trạng thái điền vào, hãy sử dụng CSS để tạo các quy tắc kiểu như
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
và sau đó, bạn có thể thực hiện một thay thế văn bản duy nhất để đưa các quy tắc css của bạn vào svg trước khi tiếp tục tạo ảnh jpeg / png. Nếu màu không thay đổi, hãy kiểm tra để đảm bảo rằng bạn không có bất kỳ kiểu tô nội dòng nào trong thẻ đường dẫn của bạn ghi đè css.
2) Nếu bạn không thực sự phải tạo tệp hình ảnh jpeg / png (và không cần hỗ trợ các trình duyệt lỗi thời), bạn có thể thao tác trực tiếp với svg với jQuery. Bạn không thể truy cập các đường dẫn svg khi nhúng svg bằng thẻ img hoặc thẻ đối tượng, vì vậy bạn sẽ phải bao gồm trực tiếp xml svg trong html trang web của mình như:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
sau đó thay đổi màu sắc dễ dàng như:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>