这很有趣,你问这个,我刚刚做了我的工作的网站,我想我应该写一个教程…这里是如何做到与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();
步骤正则表达式颜色替换可以根据svg路径xml以及如何id&颜色值被存储。如果不想在服务器上存储文件,可以像基本64一样输出图像
<?php echo '';?>
(在你使用清除/销毁),但是有PNG的问题,base64所以你可能要输出base64作为jpeg
你可以看到一个例子,我在前雇主的销售区域地图:
完:
编辑
自从写上述内容后,我想出了两种改进的技术:
1)而不是一个regex循环来改变填充状态,使用CSS来创建样式规则
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
然后你可以做一个单一的文本替换注入你的CSS规则到svg中,然后继续imagick jpeg / png创建。如果颜色不变,请检查以确保您的路径标记中没有任何内联填充样式覆盖CSS。
2)如果你不必实际创建一个jpeg / png图像文件(并且不需要支持过时的浏览器),你可以直接使用jQuery来操作svg。在使用img或对象标签嵌入svg时,您无法访问svg路径,因此您必须直接在您的网页html中包含svg xml:
然后改变颜色是一样容易:
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');