11

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

Budda
  • 18,015
  • 33
  • 124
  • 206

4 Answers4

9

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
4

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.

Nick
  • 6,967
  • 2
  • 34
  • 56
  • +1 for recommending Raphael. Even better, Raphael also supports VML when SVG isn't available, which means you can produce vector graphics that work in all browsers, even ancient old versions of IE. – Spudley May 11 '11 at 15:09
  • But Raphael works with canvas only..?! I can't find how to work with SVG using Raphael... Or canvas is just 'another represantation' of svg? – Budda May 11 '11 at 15:35
  • It says "canvas", but it doesn't mean – it's a slightly confusing way to label it. – Rich Bradshaw May 11 '11 at 15:47
1

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

Zaziffic
  • 346
  • 2
  • 9
0

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

Budda
  • 18,015
  • 33
  • 124
  • 206