Que gracioso que hizo esta, que acabo de hacer esto recientemente para el sitio de mi trabajo y estaba pensando que debería escribir un tutorial ... Aquí está cómo hacerlo con ImageMagick: sustitución de color
$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();
la expresión regular pasos puede variar dependiendo de la ruta SVG XML y cómo se almacenan los valores de color le Identificación &.Si no desea almacenar un archivo en el servidor, puede enviar la imagen como base 64 como
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(antes de utilizar claro/destruir), pero es decir, tiene problemas con el PNG como base 64 por lo que tendría probablemente tendrá que base 64 de salida como JPEG
se puede ver un ejemplo aquí que hice para un mapa del territorio de ventas un empleador anterior:
de inicio: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Acabado:
Edición
Después de haber escrito lo anterior, se me ha ocurrido con 2 técnicas mejoradas:
1) en lugar de un bucle de expresiones regulares para cambiar el relleno en el estado , use CSS para crear reglas de estilo como
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
y luego puede hacer un solo texto reemplazar inyecto Sigue tus reglas de CSS en svg antes de continuar con la creación de imagick jpeg/png. Si los colores no cambian, verifique que no haya ningún estilo de relleno en línea en las etiquetas de su ruta que sobrescriban el CSS.
2) Si no tiene que crear realmente un archivo de imagen jpeg/png (y no necesita admitir navegadores desactualizados), puede manipular el svg directamente con jQuery. No se puede acceder a los caminos SVG al incrustar el SVG usando las etiquetas img u objeto, por lo que tendrá que incluir directamente el XML SVG en su página web HTML como:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
a continuación, cambiar los colores es tan fácil como :
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>
¿existen clases diseñadas para puerto de SVG a VML? de esa manera, aún podría tener una solución tipo 'HTML5' – Patrick
eche un vistazo a mi respuesta. exactamente lo que necesita –