CODEWITHSUNDEEP
phpsvg
user2377927
user2377927

Reputation: 25

How To Use PHP/MySQL To Manage Fill Color of SVG?

I have a USA map in SVG format. I need each state to be filled with a color depending on a color hex value stored for the state in a MySQL file that gets populated by users via a PHP form.

To further explain, in my php program that displays the USA map as an SVG, here is my initial code where, for illustrative purposes here only, I have hard-coded the first state, Alaska, to be red:

$(document).ready(function() {
  $('#map').usmap({
  stateSpecificStyles': { 'AK' : {fill: '#f00'}
},

etc, ...repeat for each state...

and what I'd like to do is replace the "fill: '#f00" with the color value stored in the hex color field on the MySQL record for AK.

So, my question is:

How do I pass the color hex value stored in the MySQL record for a state to the SVG object for that state and thus be able to apply the fill color for it?

Upvotes: 1

Views: 1796

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101868

How is the SVG being included? Is it inlined, or embedded via an <image> or <object>? The answer will affect the solution.

Assuming for the moment it is inlined, here is how I would do it.

Give each of the states an id. Eg.

<g id="AK"> ... </g>

Then you can either add CSS styles (added in your PHP script):

#AK {fill: red;}

or you could set it directly using JS (eg. read as JSON and applied at onLoad):

document.getElementById("AK").style.fill = "red";

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101868

I think the problem is that you are missing some quotes around the colour. Instead of:

$('#map').usmap({ 'stateSpecificStyles': { 'AK' : {fill: <?php echo '#f00'; ?>} } });

try:

$('#map').usmap({ 'stateSpecificStyles': { 'AK' : {fill: '<?php echo '#f00'; ?>'} } });

Upvotes: 0

Related Questions