Questo è divertente hai chiesto questo, ho appena fatto questo di recente per il sito del mio lavoro e pensavo che avrei dovuto scrivere un tutorial ... Ecco come si fa con ImageMagick: sostituzione del colore
$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 passi regex può variare a seconda del xml svg percorso e il modo in cui vengono memorizzati è id & valori di colore.Se non si desidera memorizzare un file sul server, è possibile uscita l'immagine come base 64 come
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(prima di utilizzare chiaro/distruggere), ma per esempio ha problemi con PNG come Base64 in modo che ci probabilmente a base64 uscita come jpeg
potete vedere un esempio qui ho fatto per la mappa di un territorio di vendita ex datore di lavoro:
Inizio: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Finitura:
Modifica
Dopo aver scritto quanto sopra, mi è venuta in mente 2 tecniche migliorate:
1) invece di un ciclo regex per modificare il riempimento sullo stato , usare i CSS per fare le regole di stile come
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
e allora si può fare un unico testo sostituire a INIEZ t le tue regole css nella svg prima di procedere con la creazione di imagick jpeg/png. Se i colori non cambiano, verifica di non avere stili di riempimento in linea nei tag percorso che sostituiscono il css.
2) Se non è necessario creare effettivamente un file di immagine jpeg/png (e non è necessario supportare browser obsoleti), è possibile manipolare lo svg direttamente con jQuery. Non è possibile accedere ai percorsi SVG quando incorporanti la svg utilizzando img o oggetto tag, in modo da dovrete includere direttamente l'svg xml nella tua pagina web HTML come:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
quindi cambiare i colori è facile come :.
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>
ci sono tutte le classi progettate per porto SVG verso VML? in questo modo potresti avere ancora una soluzione tipo "HTML5" – Patrick
dai un'occhiata alla mia risposta. esattamente quello che ti serve –