动态更新SVG

Question

我在svg中有一些可以被用户点击的对象。

有没有办法： - 将用户点击的对象（id）的信息发送到“主html文档”？ - 从svg文件中的外部文档中绘制。

可能，我的描述不清楚，...我想实现这样的事情：

1. 用户点击svg-image;
内的任何对象
2. 主文档将收到被点击对象的ID，并且：
   • 显示有关该对象的一些信息;
   • 在svg-image中绘制其他对象。

问题：如何从svg到文档，从文档到svg进行通信？

非常感谢，欢迎任何想法！

P.S。可能SVG不是最好的方法吗？那有什么好处呢？

编辑：我看到有关使用Raphael的建议，但我希望看到“原生”选项。 （目前我正在分析Raphaels的实现情况，但不要认为它正是我所需要的。）

Answer 1

有关如何从父文档中获取引用的svg的DOM，请参阅this example。

以及here's an example如何从svg文件调用父文档。

SVG非常适合您所描述的内容。

Answer 2

我建议使用像Raphaël这样的库来支持您的SVG构建。您可以将事件附加到DOM对象，您可以通过图像组件的node属性获取这些对象。

Answer 3

如果你想坚持使用SVG / VML，Raphaël.js确实是一个很好的解决方案。现在您也可以使用canvas（新的HTML 5功能）。 Canvas是一个新的html标签（可以有id，事件......），它允许你像SVG那样绘制自由形状。 IE当然不支持本地画布，你需要“excanvas.js”（这一个或另一个，但这个很好用......）使IE兼容。

我对画布只有一个限制：使用背景图像会使IE非常慢。如果你认为这样做，我会使用Raphaël.js。

祝你好运

Answer 4

没有人建议，但不小心我发现jv已经支持svg了！ http://plugins.jquery.com/project/svg

可能这不是最好的方法，但我会尝试使用jquery使用svg。实际上，这似乎是合理的