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

Question

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

我有一个 MySQL 数据库，我在其中使用 PHP 查询并以 table 形式将结果显示到 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

如何将上面以 table 形式显示结果的类似概念应用于 SVG 图像，其中 SVG 元素仅在满足查询条件时才会 change/update？

这是我的示例 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 元素（一个圆圈）与之关联，当他们登录时 in/out，该 SVG 元素（上面的代码）会改变颜色。

现在我不知道如何使用我的 SVG 元素 link 用户名，这样 SVG 元素将像我的 table 一样动态更新我在时间戳更改时从 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' });

如果你希望它是动态的（所以状态改变而不刷新），你可能需要绑定 ajax 调用以从 mysql 数据库获取状态，但如果你已经有一个用户名在页面上显示，我假设已经处理好了。

Answer 2

我已经成功更新了svg元素的颜色，当用户登录时，相应的圆圈会改变颜色。所以我有来自 illustrator 的 svg 代码。然后我将这个脚本放入我的 php 文件中：

window.onload = function () {

if(document.body.innerHTML.toString().indexOf('username') > -1){
         circle1_1.setAttribute("fill", "yellow");  
    };
    };

每当用户登录时，信息就会填充到 MYSQL 查询的 html 中的 table 中，脚本会查看该用户名是否在页面上如果是，请更改 SVG 元素的颜色。

所以它基本上将 SVG 元素链接到任何 value/variable。

不是最漂亮的代码或逻辑，但对于其他做类似事情的人来说，享受吧。

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

How to connect mySQL to SVG using RaphaelJS?

php

html

mysql

svg

raphael