如何使用PHP / MySQL管理SVG的填充颜色？

Question

我有一张SVG格式的美国地图。我需要为每个状态填充一个颜色，具体取决于为MySQL文件中的状态存储的颜色十六进制值，用户可以通过PHP表单填充。

为了进一步解释，在我的php程序中将美国地图显示为SVG，这里是我的初始代码，仅出于说明目的，我将第一个状态Alaska硬编码为红色：

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

等，......重复每个州......

我要做的是将“fill：'＃f00”替换为存储在AK记录的十六进制颜色字段中的颜色值。

所以，我的问题是：

如何将状态的MySQL记录中存储的颜色十六进制值传递给该状态的SVG对象，从而能够为其应用填充颜色？

Answer 1

如何包含SVG？它是内联的，还是通过<image>或<object>嵌入的？答案将影响解决方案。

假设目前内联，我就是这样做的。

给每个州一个id。例如

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

然后你可以添加CSS样式（在PHP脚本中添加）：

#AK {fill: red;}

或者您可以使用JS直接设置它（例如，读取为JSON并在onLoad中应用）：

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

Answer 2

我认为问题在于你错过了颜色周围的一些引号。而不是：

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

尝试：

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