Javascript 动态更新SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5966385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
update SVG dynamically
提问by Budda
I have some objects inside of svg that can be clicked by user.
我在 svg 中有一些可以被用户点击的对象。
Is there any way to: - send information about object (id) that was clicked by user to the 'main html document'? - draw from outside document in the svg file.
有什么方法可以： - 将有关用户单击的对象 (id) 的信息发送到“主 html 文档”？- 从 svg 文件中的外部文档中绘制。
Probably, my description is unclear,... I want to implement something like this:
可能，我的描述不清楚，......我想实现这样的东西：
- user click on any object inside of svg-image;
- main document will receive id of the clicked object and:
- display some information about that object;
- draw additional object inside of the svg-image.
- 用户点击 svg-image 内的任何对象；
- 主文档将接收被点击对象的 id 和：
- 显示有关该对象的一些信息；
- 在 svg-image 内绘制其他对象。
Questions: how to communication from svg to document and from document to svg?
问题：如何从 svg 到文档以及从文档到 svg 进行通信？
Thanks a lot, any thoughts are welcome!
非常感谢，欢迎任何想法！
P.S. Probably SVG is not the best way do that? What is better then?
PS可能SVG不是最好的方法吗？那什么更好呢？
EDIT:I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).
编辑：我看到了关于使用 Raphael 的建议，但我想看到“本机”选项。（目前我正在分析 Raphaels 的实现以了解这一点，但不要认为它完全符合我的需要）。
采纳答案by Erik Dahlstr?m
See this examplefor how to get the DOM of a referenced svg from the parent document.
请参阅此示例以了解如何从父文档中获取引用的 svg 的 DOM。
And here's an exampleof how you can call from an svg file to the parent document.
而且这里有一个例子，如何可以从SVG文件父文档调用。
SVG is very well suited for doing what you describe.
SVG 非常适合执行您所描述的操作。
回答by Nick
回答by Zaziffic
Rapha?l.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
如果你想坚持使用 SVG/VML，Rapha?l.js 确实是一个很好的解决方案。现在您也可以使用画布（新的 HTML 5 功能）。Canvas 是一个新的 html 标签（可以有 id、事件等），它允许您像 SVG 那样绘制自由形状。IE 本身不支持画布，当然，你需要“excanvas.js”（这个或另一个，但这个工作得很好......）以使其与 IE 兼容。
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Rapha?l.js if it was something you'd consider doing.
我只知道一个关于画布的限制：使用背景图像会使 IE 变得非常慢。如果您考虑这样做，我会使用 Rapha?l.js。
Good luck
祝你好运
回答by Budda
Nobody suggested, but accidentally I've found that svg is already supported by jQuery! http://plugins.jquery.com/project/svg
没有人建议，但我无意中发现 jQuery 已经支持 svg！ http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable
可能这不是最好的方法，但我会尝试使用 jquery 使用 svg。实际上，这似乎很合理
