update SVG dynamically

Question

I have some objects inside of svg that can be clicked by user.

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.

Probably, my description is unclear,... I want to implement something like this:

1. user click on any object inside of svg-image;
2. main document will receive id of the clicked object and:
   • display some information about that object;
   • draw additional object inside of the svg-image.

Questions: how to communication from svg to document and from document to svg?

Thanks a lot, any thoughts are welcome!

P.S. Probably SVG is not the best way do that? What is better then?

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).

Answer 1

See this example for how to get the DOM of a referenced svg from the parent document.

And here's an example of how you can call from an svg file to the parent document.

SVG is very well suited for doing what you describe.

Answer 2

I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.