我正在做一个网络项目，它涉及到一个动态生成的美国 map ，根据一组数据给不同的州上色.
这个SVG文件为我提供了一个很好的美国空白 map ，并且很容易更改每个州的 colored颜色 .困难在于IE浏览器不支持SVG，所以为了使用SVG提供的便捷语法，我需要将其转换为JPG.
理想情况下，我希望只使用GD2库，但也可以使用ImageMagick.我完全不知道怎么做这件事.
任何允许我动态改变美国 map 上各州 colored颜色 的解决方案都会被考虑.关键是它很容易在运行中更改 colored颜色 ，而且是跨浏览器的.请只提供PHP/Apache解决方案.
你问这个问题真有趣，我最近才为我的工作网站做了这个，我在想我应该写个教程……以下是如何使用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();
正则表达式 colored颜色 替换步骤可能会因SVG路径XML和您标识 colored颜色 值的存储方式而异(&；).如果您不想在服务器上存储文件，可以将图像输出为64位格式，如
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(在使用clear/destroy之前)但是ie在将PNG作为base64存在问题，所以您可能必须将base64输出为jpeg
你可以在这里看到我为一位前雇主的销售区域 map 做的一个例子:
起点:https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg){kind=spacer}
完成:
Edit
写完以上内容后，我想出了两个改进的技巧:
1) 使用CSS来创建样式规则，而不是使用正则表达式循环来更改填充状态，比如
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
然后，在继续创建imagick jpeg/png之前，可以进行一次文本替换，将css规则注入svg.如果 colored颜色 不变，请判断以确保路径标记中没有任何内联填充样式覆盖css.
2) 如果不需要实际创建jpeg/png图像文件(也不需要支持过时的浏览器)，可以直接使用jQuery操作svg.在使用img或对象标记嵌入svg时，您无法访问svg路径，因此您必须在网页html中直接包含svg xml，如:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
然后，更改 colored颜色 非常简单:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>