Как использовать PHP/MySQL для управления цветом заливки SVG?

Question

У меня есть карта США в формате SVG. Мне нужно, чтобы каждое состояние заполнялось цветом в зависимости от значения цвета, сохраненного для состояния в файле MySQL, который заполняется пользователями через форму PHP.

Чтобы пояснить, в моей программе php, отображающей карту США как SVG, вот мой первоначальный код, где только для иллюстративных целей я имею жестко закодированное первое состояние, на Аляске, красным:

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

и т.д., ... повторить для каждого государства ...

и то, что я хотел бы сделать, это заменить «заполнить:«# f00" со значением цвета, хранящегося в поле цвета шестигранной на записи MySQL для AK.

Итак, мой вопрос:

Как передать шестнадцатеричное значение цвета, хранящееся в записи MySQL для состояния к объекту SVG для этого состояния, и, таким образом, быть в состоянии применить цвет заливки для него?

Answer 1

Я думаю, проблема в том, что вам не хватает некоторых кавычек по всему цвету. Вместо того, чтобы:

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

попробовать:

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

Answer 2

Как включить SVG? Он встроен или встроен через <image> или <object>? Ответ повлияет на решение.

Предполагая, что на данный момент это встроено, вот как я это сделаю.

Дайте каждому из состояний идентификатор. Например.

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

Затем вы можете добавить стили CSS (встраивается в PHP скрипт):

#AK {fill: red;} 

или вы можете установить его непосредственно с помощью JS (например, читать как JSON и применяется в OnLoad.):

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