javascript - update SVG dynamically - Stack Overflow

admin管理员组

文章数量:1200357

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

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

• javascript
• html
• svg

Share Improve this question Follow edited May 11, 2011 at 17:04 Budda asked May 11, 2011 at 15:00 BuddaBudda 18.3k3535 gold badges128128 silver badges210210 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

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.

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.

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.

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.

Good luck

Nobody suggested, but accidentally I've found that svg is already supported by jQuery! 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

本文标签： javascriptupdate SVG dynamicallyStack Overflow