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

Question

我有一张 SVG 格式的美国地图。我需要根据存储在 MySQL 文件中的状态的颜色十六进制值来填充每个状态，该文件由用户通过 PHP 表单填充。

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

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

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

我想做的是将“填充：'#f00”替换为存储在 AK 的 MySQL 记录上的十六进制颜色字段中的颜色值。

所以，我的问题是：

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

score 1 · Accepted Answer

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

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

给每个州一个id。例如。

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

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

#AK {fill: red;}

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

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

score 0 · Accepted Answer

我认为问题在于您在颜色周围缺少一些引号。代替：

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

尝试：

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

2 回答 2