CODEWITHSUNDEEP
javascriptsvg
AlanObject
AlanObject

Reputation: 9983

Getting Events Out of an embedded SVG document

None of the questions I have searched through seems to help me with this.

I am embedding an SVG document thusly:

<embed onload="fixup()" id="zgraphic" src="images/test.svg" width="500" type="image/svg+xml" />

And then I am trying to seek out elements in the SVG and add event handlers to them. I already learned that jQuery won't work to find SVG elements. I have this in the head:

<script type="text/javascript">

 function blah(event) {
     alert("Got event: " + event)
 }

    var svg;
    var slot1;

function fixup() {
   svg = jQuery("#zgraphic")[0].getSVGDocument();
   slot1 = svg.getElementById("slot1");
   slot1.onclick = blah;
   alert("Set onclick for " + slot1);
  }
 </script>

Using firebug I can see that the svg and slot1 variables are getting set, and the onclick property of slot1 is also getting set. Yet the event never comes.

Side question: Is there a better way to get the root SVGDocument object than the way I am doing it? I got there by trial and error but it looks shaky to me and I haven't been able to find anything like it on the web. It would be nice if jQuery could reach into the SVG document but I can live without it if I have to.

Upvotes: 0

Views: 604

Answers (3)

rajiv.cla
rajiv.cla

Reputation: 366

Create functions in test.svg that call the correct code in your file with the fixup function

So in your test.svg file you'll have something like this

function blah(e) {
e.stopPropagation();
window.parent.blah(e);

}

Upvotes: 1

AlanObject
AlanObject

Reputation: 9983

I never did get this to work, but I have discovered what I want to do works fine in HTML 5 on browsers that supports it. An svg element gets integrated in to the document DOM the same as anything else, so jQuery and getElementById works the same as it would for other elements.

Upvotes: 0

d-_-b
d-_-b

Reputation: 6773

You might want to take a look at dojo's gfx: http://docs.dojocampus.org/dojox/gfx

It is an API for accessing the browsers vector capabilities.

Upvotes: 0

Related Questions