php - 如何使用 RaphaelJS 将 mySQL 连接到 SVG？

Question

我正在尝试将 MySQL 数据库链接到 SVG 图像，以使用 Raphael JS 动态更改 SVG 元素。

我有一个 MySQL 数据库，我在其中使用 PHP 进行查询，并将结果以表格形式显示到 html 页面:(下面的脚本工作并仅在满足时间戳条件时显示用户名和图片。)

    <?php
    mysql_connect("","","");
    mysql_select_db("");
    $res=mysql_query("select username, picture from 'table' WHERE     status > UNIX_TIMESTAMP(NOW()) - 300");
    echo "<table>";
    if (!$res) {
        die("Query to show fields failed");
    }

$fields_num = mysql_num_fields($res);

echo "<h1>Table:Status</h1>";
echo "<table border='1'><tr>";


for($i=0; $i<$fields_num; $i++)
{
    $field = mysql_fetch_field($res);
    echo "<td>{$field->name}</td>";
}
echo "</tr>\n";

while($row=mysql_fetch_array($res))
{
echo "<tr>";

echo "<td>"; echo $row["username"]; echo "</td>";

echo "<td>"; ?> <img src=" <?php echo $row["picture"]; ?>" height="50">  

<?php 

如何将上面类似的概念以表格形式将结果显示为 SVG 图像，其中 SVG 元素仅在满足查询条件时才会更改/更新？

这是我的示例 SVG 图片，包含 5 个元素:

<polygon fill="#B2B2B2" points="150.3,8.8 203.8,31.7 169.8,91.4       133.4,75.8 "/>
<circle id="circleT3" circle fill="#FFFFFF" cx="163.1" cy="53.6" r="7.3"/>
<circle id="circle3_1" circle fill="#CCCCCC" cx="184.5" cy="82.4" r="7.3"/>
<circle id="circle3_5" circle fill="#CCCCCC" cx="136.6" cy="27.2" r="7.3"/>
<circle id="circle3_4" circle fill="#CCCCCC" cx="166.4" cy="7.3" r="7.3"/>

有人可以指点我一些示例代码或教程吗？或者有更好的方法吗？谢谢。

编辑:

在 MySQL 数据库中，我有一列用于用户名、密码和时间戳。当用户登录网页时，时间戳会更新。上面的 PHP 代码用于查询从当前时间起 5 分钟前有谁登录过。

我想用 SVG 对这些信息做的是创建登录的图形表示。

因此每个用户名都会有自己的 SVG 元素(一个圆圈)与之关联，当他们登录/注销时，该 SVG 元素(上面的代码)会改变颜色。

现在我不知道如何将用户名与我的 SVG 元素相关联，以便 SVG 元素会像我在时间戳更改时从 MySQL 查询的表一样动态更新。

Answer 1

答案将取决于进一步的信息，这些信息在剩下的部分写完后才能真正获得。

您可以结合使用 Snap(修改现有的内联 SVG 或创建它)或 Raphael(仅创建新的 SVG，您不能使用它来修改内联 SVG)，或选择其他 SVG 库(例如 svg.js 或jquery.svg 也许)。

假设您已经在页面上使用了一些东西，即显示登录用户，您可以用伪代码做一些事情......

loop user; 
if( document.getElementById( userId ) ) Snap('#' + userId + '_image').attr({ fill: 'green' });

(svg 引用可能与圆圈相同，但在某些地方您需要某种类型的查找才能知道哪个圆圈是哪个用户 ID)

这假设 svg 在页面上。如果不是，您可以使用

创建它

paper.circle(x,y,r).attr({ fill: 'green' });

如果您希望它是动态的(因此状态会在不刷新的情况下发生变化)，您可能需要绑定(bind) ajax 调用以从 mysql 数据库获取状态，但是如果您已经在页面上显示了一个用户名，我假设已经处理好了。