Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Re: Some SVG DOM questions

Expand Messages
  • Darryl Watson
    Thanks, Francis, that code example helped me to accomplish what I needed. And it was also good to point out that putting most of the javascript code in the
    Message 1 of 3 , Apr 1, 2006
    • 0 Attachment
      Thanks, Francis, that code example helped me to accomplish what I
      needed. And it was also good to point out that putting most of the
      javascript code in the parent HTML makes debugging much easier; I use
      Visual Studio 2005 as my IDE.

      Francis Hemsher wrote:

      >Darryl Watson wrote:
      >
      >
      >>Hello again-
      >>
      >>I'm using IE6 and ASV 3.03.
      >>
      >>I think I'm struggling with some misconceptions about how events
      >>
      >>
      >work in
      >
      >
      >>SVG. I have an embedded SVG document, and most of the time, I
      >>
      >>
      >have a
      >
      >
      >>common set of onclick and onmouseover handlers defined on the SVG
      >>
      >>
      >tag of
      >
      >
      >>the document, which reference inline JS code. Thus:
      >>
      >> <svg id="SVGDoc" onclick="internal_click(evt);"
      >>onmouseover="internal_mouseover(evt);" ... >
      >>
      >>I also have what I am calling 'external' javascript, which is code
      >>included in the HTMl document containing the SVG embed. So I have
      >>
      >>
      >that
      >
      >
      >>across-the-embed thing going for me. :)
      >>
      >>Anyway, under certain conditions, I'd like to disable or redefine
      >>
      >>
      >the
      >
      >
      >>document's internal event handlers and call external routines
      >>
      >>
      >instead.
      >
      >
      >>Because this gets triggered by a button click in the parent HTML,
      >>
      >>
      >I'd
      >
      >
      >>like to redefine these event handlers in the parent HTML. So I am
      >>trying to do something like this:
      >>
      >> function onclick_change(e)
      >> {
      >> var embed = document.getElementById('SVGEmbed');
      >> var svgdoc = embed.getSVGDocument();
      >> var svgroot = svgdoc.getDocumentElement();
      >>
      >> svgroot.onclick=null; // I've also tried
      >>
      >>
      >svgdoc here...
      >
      >
      >> svgroot.onmouseover=null;
      >> svgdoc.getElementById('myTopLayer').onclick=function() {
      >>top.external_click(evt); };
      >> }
      >>
      >>No joy. I'm not disabling the SVG document event handlers, and
      >>therefore my top layer event handlers don't get called. I've
      >>
      >>
      >tried to
      >
      >
      >>use setAttributeNS calls as well, without success. I suspect I'm
      >>
      >>
      >not
      >
      >
      >>pointing to the right DOM elements... got any hints about how to
      >>
      >>
      >do this?
      >
      >
      >>Thanks!
      >>
      >>
      >>
      >
      >Hi Darryl,
      >
      >Try this: Place both functions in the HTML. I normally do not put
      >functions in the SVG, unless absolutely necessary. It's easier for
      >debugging if I have all functions in HTML
      >
      >EXAMPLE:
      >
      >HTML file:
      >
      ><HTML>
      ><BODY onLoad=init()>
      ><embed name="svgEmbed" src="mySVG.svg" width="500" height="400"
      >type="image/svg+xml">
      ><br>
      ><button onClick=changeIt()>change</button>
      ><script>
      >var mySVG
      >function init()
      >{
      > docSVG=document.embeds["svgEmbed"].getSVGDocument()
      > mySVG=docSVG.getElementById("mySVG")
      >}
      >
      >//--- mySVG initial onclick----
      >function internalClick()
      >{
      > alert("Internal")
      >}
      >
      >function externalClick()
      >{
      > alert("external")
      >}
      >//---button for test(toggle)---
      >function changeIt()
      >{
      > if(mySVG.getAttribute("onclick")=="internalClick()")
      > mySVG.setAttribute("onclick","externalClick()")
      > else
      > mySVG.setAttribute("onclick","internalClick()")
      >}
      ></script>
      ></BODY>
      ></HTML>
      >
      >mySVG.svg file:
      >
      ><?xml version="1.0" ?>
      ><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
      >1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
      ><svg width="500" height="400" id="mySVG" onclick="internalClick()" >
      ><rect x="0" y="0" width="500" height="400" fill="blue"/>
      ></svg>
      >
      >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.