เป็นเรื่องตลกที่คุณถามสิ่งนี้ฉันเพิ่งทำสิ่งนี้เมื่อเร็ว ๆ นี้สำหรับไซต์งานของฉันและฉันคิดว่าฉันควรจะเขียนบทช่วยสอน ... นี่คือวิธีดำเนินการกับ 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();
ขั้นตอนการเปลี่ยนสี regex อาจแตกต่างกันไปขึ้นอยู่กับเส้นทาง svg xml และวิธีการจัดเก็บค่า id และสีของคุณ หากคุณไม่ต้องการจัดเก็บไฟล์บนเซิร์ฟเวอร์คุณสามารถส่งออกรูปภาพเป็นฐาน 64 เช่น
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(ก่อนที่คุณจะใช้ clear / destroy) แต่เช่นมีปัญหากับ PNG เป็น base64 ดังนั้นคุณอาจต้องส่งออก base64 เป็น jpeg
คุณสามารถดูตัวอย่างได้ที่นี่สำหรับแผนที่พื้นที่ขายของนายจ้างในอดีต:
เริ่มต้น: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
เสร็จสิ้น: 
แก้ไข
ตั้งแต่เขียนข้อความข้างต้นฉันได้พบกับ 2 เทคนิคที่ปรับปรุงแล้ว:
1) แทนที่จะใช้ regex loop เพื่อเปลี่ยนสถานะการเติมให้ใช้ 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>