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

【问题标题】：How To Use PHP/MySQL To Manage Fill Color of SVG?如何使用 PHP/MySQL 管理 SVG 的填充颜色？
【发布时间】：2016-10-14 07:02:40
【问题描述】：

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

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

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

等等，...对每个状态重复...

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

所以，我的问题是：

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

【问题讨论】：

标签： php svg

【解决方案1】：

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

假设它是内联的，我会这样做。

给每个状态一个id。例如。

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

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

#AK {fill: red;}

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

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

【讨论】：

感谢您的信息。我正在使用内联 SVG 并进行了设置，以便我可以手动调整每个状态的颜色。我还不明白如何从数据库中动态获取颜色代码并将其应用于两种方法（CSS 或 JS）中的任何一种。如何设置 PHP 循环以从颜色字段中获取值，从而将其应用于 CSS 或 JS？换句话说，我怎么说： document.getElementById("AK").style.fill =
我很困惑。你是说你不知道如何从数据库中获取它？或者你不知道如何在 PHP 中做一个循环？或者您不知道如何将 JavaScript 添加到您的 HTML 输出中？
我知道如何使用 PHP 来设置循环和提取数据。我不知道如何将我提取的值提取到我的 JavaScript 代码中，以便每个状态都知道要填充什么颜色。换句话说，这个示例代码不起作用，但显示了我试图让阿拉斯加州被红色填充：$(document).ready(function() { $('#map') .usmap({ 'stateSpecificStyles': { 'AK' : {fill: } },
啊。我现在已经抽筋了。您正在使用一个名为“usmap”的 jQuery 插件。我没听说过，从你的问题来看也不是很明显。

【解决方案2】：

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

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

尝试：

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

【讨论】：