根据来自 mySQL DB 的数据动态更改 svg 图像元素答案

【问题标题】：Dynamically changing an svg image element depending on data from mySQL DB根据来自 mySQL DB 的数据动态更改 svg 图像元素
【发布时间】：2015-04-18 09:06:13
【问题描述】：

我正在尝试根据 mySQL 数据库中的数据更改 svg 元素。

例如，我在 adobe 插图中创建了一个 svg 图像，其中有一个矩形作为桌子，4 个圆圈作为桌子周围的椅子。

我想将每把椅子表示为一个“人”，当那个“个人”登录时，椅子会变成不同的颜色，并在他们注销时变回。

我在登录方面使用了 php 和 mySQL，并且一切正常。这将是登录的图形表示。

当 mySQL 中的数据发生变化时（我有一个登录时间戳），图像元素也会发生变化。我需要javascript来做到这一点，但我很难过。

我想知道上述情况是否可能，如果可能，我应该采取哪个方向或有其他选择吗？

我看过 jquery 和 raphael js，但这是我第一次使用矢量图像，非常感谢任何帮助。

编辑~ 我仔细查看了 Raphael JS，并对 MySQL 进行了 php 查询，并将过滤后的结果显示到 html 页面上。

如何将 MySQL DB 与我的 SVG 图像链接起来，以便每个 SVG 元素都会根据我的过滤结果发生变化？

【问题讨论】：

试试 canvg() ，告诉我

标签： javascript php jquery mysql svg

【解决方案1】：

你想要达到的目标完全没有限制，实际上在使用 svg 时很常见。如果您没有使用 svg 的经验，可以查看第三方库，例如 d3 或 RaphaelJS

【讨论】：

【解决方案2】：

这确实是可能的，尽管从您提出问题的方式来看，您似乎可能遗漏了一些步骤：

当您的 MySQL 数据发生变化时，服务器必须以某种方式通知客户端（浏览器）该事件。用于此的选项包括服务器发送事件 (SSE)、websockets 和长轮询。我推荐使用 SSE，这看起来是一个关于使用它们的有用问题：Server-sent events and php - what triggers events on the server?
当浏览器从服务器收到更改通知时，它必须更新图形。这是你想使用像 d3 或 Raphaël 这样的工具的地方（我想你会发现后者在这种情况下更容易使用）。如果需要，您应该能够在达到这一点后提出更具体的问题。

【讨论】：

我正在使用长轮询，AJAX。我同意 SSE 是一个更好的选择，但我必须使用 IE。我会仔细看看拉斐尔。谢谢。