Question

我正在尝试将MySQL DB链接到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 DB中，我有一个用户名，密码和时间戳列。当用户登录网页时，时间戳更新。上面的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' });

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

Answer 2

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

window.onload = function () {

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

每当用户登录时，信息将填充在来自MYSQL查询的html表中，并且脚本会查看该用户名是否在页面上，如果是，则更改SVG元素的颜色。

因此它基本上将SVG元素链接到任何值/变量。

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

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

2 个答案: