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

Some SVG DOM questions

Expand Messages
  • Darryl Watson
    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
    Message 1 of 3 , Mar 31, 2006
      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!
    • Francis Hemsher
      ... work in ... have a ... tag of ... that ... the ... instead. ... I d ... svgdoc here... ... tried to ... not ... do this? ... Hi Darryl, Try this: Place
      Message 2 of 3 , Mar 31, 2006
        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>


        This may not fully address what you want to do, but try it, and get
        back if I missed your need.

        Regards,
        Francis
      • 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 3 of 3 , Apr 1, 2006
          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.