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

Firefox issues with createElementNS, works in IE

Expand Messages
  • jaychambers
    Can any tell me whay is going on here. I have no more hiar left to pull out!!!!! I have a HTML page with some JScript in it, and a .svg. The SVG look like
    Message 1 of 5 , Jan 6, 2006
    • 0 Attachment
      Can any tell me whay is going on here. I have no more hiar left to
      pull out!!!!!

      I have a HTML page with some JScript in it, and a .svg. The SVG look
      like this:

      <svg version="1.1" baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:ev="http://www.w3.org/2001/xml-events">
      <rect x="1cm" y="1cm" width="1cm" height="1cm" />
      </svg>

      simple eh`. just draws a rect. This work in both IE and FireFox (1.5).

      Now to the HTML page. I want to use DOM/JScript to dynamically create
      SVG elements . HEre is my code:

      <html>
      <body>
      <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="/canvas.svg" />
      <script language="javascript">
      function draw() {
      var svgns = "http://www.w3.org/2000/svg";
      svgDocument = this.document.mydoc.getSVGDocument();
      var shape = svgDocument.createElementNS('http://www.w3.org/2000/svg',
      'circle');

      shape.setAttributeNS(null, 'cx', 25);
      shape.setAttributeNS(null, 'cy', 25);
      shape.setAttributeNS(null, 'r', 20);
      shape.setAttributeNS(null, 'fill', 'green');
      svgDocument.documentElement.appendChild(shape);
      }
      var blah = draw();
      </script>
      <p>testing</p>
      </body>
      </html>

      I just want to draw a friggin` circle dynamically!!!! Is this a bug in
      Firefox, for a strictness issues with something inncorrect in the code.?

      Anyone, please help....
    • Jonathan Watt
      Hi, The problem is likely that the SVG document hasn t yet loaded when draw() is called. Instead of calling it in the element, call it onload. This
      Message 2 of 5 , Jan 6, 2006
      • 0 Attachment
        Hi,

        The problem is likely that the SVG document hasn't yet loaded when draw() is
        called. Instead of calling it in the <script> element, call it onload. This
        should work I think:

        <html>
        <body onload="draw();">
        <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="canvas.svg" />
        <script language="javascript">

        var svgDocument;

        function draw() {
        var svgns = "http://www.w3.org/2000/svg";

        svgDocument = this.document.mydoc.getSVGDocument();
        var shape = svgDocument.createElementNS('
        http://www.w3.org/2000/svg','circle');

        shape.setAttributeNS(null, 'cx', 25);
        shape.setAttributeNS(null, 'cy', 25);
        shape.setAttributeNS(null, 'r', 20);
        shape.setAttributeNS(null, 'fill', 'green');
        svgDocument.documentElement.appendChild(shape);
        }

        </script>
        <p>testing</p>
        </body>
        </html>

        BTW, the JavaScript console is very useful in finding errors. See Tools >
        JavaScript Console from the menubar. getSVGDocument() will have returned
        null, so likely there was an error for the next line.

        Regards,
        Jonathan

        On 1/6/06, jaychambers <jaychambers@...> wrote:
        >
        > Can any tell me whay is going on here. I have no more hiar left to
        > pull out!!!!!
        >
        > I have a HTML page with some JScript in it, and a .svg. The SVG look
        > like this:
        >
        > <svg version="1.1" baseProfile="full"
        > xmlns="http://www.w3.org/2000/svg"
        > xmlns:xlink="http://www.w3.org/1999/xlink"
        > xmlns:ev="http://www.w3.org/2001/xml-events">
        > <rect x="1cm" y="1cm" width="1cm" height="1cm" />
        > </svg>
        >
        > simple eh`. just draws a rect. This work in both IE and FireFox (1.5).
        >
        > Now to the HTML page. I want to use DOM/JScript to dynamically create
        > SVG elements . HEre is my code:
        >
        > <html>
        > <body>
        > <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="/canvas.svg" />
        > <script language="javascript">
        > function draw() {
        > var svgns = "http://www.w3.org/2000/svg";
        > svgDocument = this.document.mydoc.getSVGDocument();
        > var shape = svgDocument.createElementNS('http://www.w3.org/2000/svg',
        > 'circle');
        >
        > shape.setAttributeNS(null, 'cx', 25);
        > shape.setAttributeNS(null, 'cy', 25);
        > shape.setAttributeNS(null, 'r', 20);
        > shape.setAttributeNS(null, 'fill', 'green');
        > svgDocument.documentElement.appendChild(shape);
        > }
        > var blah = draw();
        > </script>
        > <p>testing</p>
        > </body>
        > </html>
        >
        > I just want to draw a friggin` circle dynamically!!!! Is this a bug in
        > Firefox, for a strictness issues with something inncorrect in the code.?
        >
        > Anyone, please help....
        >
        >
        >
        >
        >
        >
        >
        >
        >
        > -----
        > To unsubscribe send a message to:
        > svg-developers-unsubscribe@yahoogroups.com
        > -or-
        > visit http://groups.yahoo.com/group/svg-developers and click "edit my
        > membership"
        > ----
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        >
        >


        [Non-text portions of this message have been removed]
      • jaychambers
        Hi Jonathan, This didnt work either, at least, not entirely. the JScript console is cool. Learn something new every day!!! Does IE have similar tool? didnt
        Message 3 of 5 , Jan 7, 2006
        • 0 Attachment
          Hi Jonathan,

          This didnt work either, at least, not entirely. the JScript
          console is cool. Learn something new every day!!! Does IE have
          similar tool? didnt see one. Anyway, I've been looking around, and
          this appears to be a pretty common issue with FF. The FF JScript
          console says "svgDocument has no properties." From what I've read,
          this is common in FF when using getSVGDocument. Whats more wierd,
          is I disabled the FF SVG and loaded Adobe, and thats where I saw the
          behavior. For grins, this morning, I changed back to native SVG in
          FF, and all the sudden, it works using

          function onload=draw(), SVG native support, well-formed XML SVG
          file, and this line
          svgDocument = document.embeds["SVGNAME"].getSVGDocument();

          dosent work with Adobe loadedup. I'm doing some further testing,
          because FF is producing some very wierd "works when the sun is @ 45
          degress of the ....." kind of issues. Its somewhat irritating that
          the browser I have some to love and defend, has such flaky issues it
          turns out.

          BTW, here is a link to a site that has a example at the bottom
          trying to accomplish the same thing! Dosent work on FF (although
          youl have to use adobe plugin, guess they arent using well-formed
          XML)
          http://www.svgopen.org/2002/papers/hauser_wenz__scripting_svg/


          I wanted to thank you for your time to respond to my question!
          -j
          --- In svg-developers@yahoogroups.com, Jonathan Watt <wattie@g...>
          wrote:
          >
          > Hi,
          >
          > The problem is likely that the SVG document hasn't yet loaded when
          draw() is
          > called. Instead of calling it in the <script> element, call it
          onload. This
          > should work I think:
          >
          > <html>
          > <body onload="draw();">
          > <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="canvas.svg" />
          > <script language="javascript">
          >
          > var svgDocument;
          >
          > function draw() {
          > var svgns = "http://www.w3.org/2000/svg";
          >
          > svgDocument = this.document.mydoc.getSVGDocument();
          > var shape = svgDocument.createElementNS('
          > http://www.w3.org/2000/svg','circle');
          >
          > shape.setAttributeNS(null, 'cx', 25);
          > shape.setAttributeNS(null, 'cy', 25);
          > shape.setAttributeNS(null, 'r', 20);
          > shape.setAttributeNS(null, 'fill', 'green');
          > svgDocument.documentElement.appendChild(shape);
          > }
          >
          > </script>
          > <p>testing</p>
          > </body>
          > </html>
          >
          > BTW, the JavaScript console is very useful in finding errors. See
          Tools >
          > JavaScript Console from the menubar. getSVGDocument() will have
          returned
          > null, so likely there was an error for the next line.
          >
          > Regards,
          > Jonathan
          >
          > On 1/6/06, jaychambers <jaychambers@y...> wrote:
          > >
          > > Can any tell me whay is going on here. I have no more hiar left
          to
          > > pull out!!!!!
          > >
          > > I have a HTML page with some JScript in it, and a .svg. The SVG
          look
          > > like this:
          > >
          > > <svg version="1.1" baseProfile="full"
          > > xmlns="http://www.w3.org/2000/svg"
          > > xmlns:xlink="http://www.w3.org/1999/xlink"
          > > xmlns:ev="http://www.w3.org/2001/xml-events">
          > > <rect x="1cm" y="1cm" width="1cm" height="1cm" />
          > > </svg>
          > >
          > > simple eh`. just draws a rect. This work in both IE and
          FireFox (1.5).
          > >
          > > Now to the HTML page. I want to use DOM/JScript to dynamically
          create
          > > SVG elements . HEre is my code:
          > >
          > > <html>
          > > <body>
          > > <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="/canvas.svg" />
          > > <script language="javascript">
          > > function draw() {
          > > var svgns = "http://www.w3.org/2000/svg";
          > > svgDocument = this.document.mydoc.getSVGDocument();
          > > var shape = svgDocument.createElementNS
          ('http://www.w3.org/2000/svg',
          > > 'circle');
          > >
          > > shape.setAttributeNS(null, 'cx', 25);
          > > shape.setAttributeNS(null, 'cy', 25);
          > > shape.setAttributeNS(null, 'r', 20);
          > > shape.setAttributeNS(null, 'fill', 'green');
          > > svgDocument.documentElement.appendChild(shape);
          > > }
          > > var blah = draw();
          > > </script>
          > > <p>testing</p>
          > > </body>
          > > </html>
          > >
          > > I just want to draw a friggin` circle dynamically!!!! Is this a
          bug in
          > > Firefox, for a strictness issues with something inncorrect in
          the code.?
          > >
          > > Anyone, please help....
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > > -----
          > > To unsubscribe send a message to:
          > > svg-developers-unsubscribe@yahoogroups.com
          > > -or-
          > > visit http://groups.yahoo.com/group/svg-developers and
          click "edit my
          > > membership"
          > > ----
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          >
          >
          > [Non-text portions of this message have been removed]
          >
        • Ronan Oger
          ... JScript is a proprietary technology owned by MS. In FF and everywhere else, it is Javascript (based on ecmascript). JScript and Javascript have a lot in
          Message 4 of 5 , Jan 7, 2006
          • 0 Attachment
            On Saturday 07 January 2006 13:56, jaychambers wrote:
            >  The FF JScript

            JScript is a proprietary technology owned by MS. In FF and everywhere else, it
            is Javascript (based on ecmascript).

            JScript and Javascript have a lot in common, but they also sadly have many
            differences, and people invoke JScript calls in Javascript that fail, much to
            their confusion.

            BTW, are you aware that you can not access the SVG from the html, or vice
            versa, in ASV on Mozilla on Linux? Your html/svg scripting may/will have
            issues with ASV users outside of IE.


            <shakesperian type="soothesayer" mode="accent">
            Beware, beware.... Beeeewaaaare.
            </shakespearian>


            Good luck with all these IE-specific traps.
            Ronan
            --
            Ronan Oger
            Director
            RO IT Systems GmbH
            ...Building Web2.0 with SVG since 2001

            http://www.roitsystems.com
          • Jonathan Watt
            Hi, ... As Ronan says, when running in Mozilla, ASV doesn t have support to allow script in the HTML to talk to the SVG it s rendering. In other words that
            Message 5 of 5 , Jan 7, 2006
            • 0 Attachment
              Hi,

              On 1/7/06, jaychambers <jaychambers@...> wrote:
              >
              > Hi Jonathan,
              >
              > This didnt work either, at least, not entirely. the JScript
              > console is cool. Learn something new every day!!! Does IE have
              > similar tool? didnt see one. Anyway, I've been looking around, and
              > this appears to be a pretty common issue with FF. The FF JScript
              > console says "svgDocument has no properties." From what I've read,
              > this is common in FF when using getSVGDocument. Whats more wierd,
              > is I disabled the FF SVG and loaded Adobe, and thats where I saw the
              > behavior.


              As Ronan says, when running in Mozilla, ASV doesn't have support to allow
              script in the HTML to talk to the SVG it's rendering. In other words that
              error is always going to occur if you're using ASV in Firefox.

              For grins, this morning, I changed back to native SVG in
              > FF, and all the sudden, it works using
              >
              > function onload=draw(), SVG native support, well-formed XML SVG
              > file, and this line
              > svgDocument = document.embeds["SVGNAME"].getSVGDocument();


              Yes, everything should work fine using Mozilla Firefox's native SVG support.

              dosent work with Adobe loadedup. I'm doing some further testing,
              > because FF is producing some very wierd "works when the sun is @ 45
              > degress of the ....." kind of issues. Its somewhat irritating that
              > the browser I have some to love and defend, has such flaky issues it
              > turns out.


              I played around with your files, modified in a variety of ways. It
              consistantly works for me. If you can keep copies of the files exactly as
              they are when they don't work for you I'll look into this.

              BTW, here is a link to a site that has a example at the bottom
              > trying to accomplish the same thing! Dosent work on FF (although
              > youl have to use adobe plugin, guess they arent using well-formed
              > XML)
              > http://www.svgopen.org/2002/papers/hauser_wenz__scripting_svg/


              Yes, well as you can see the SVG document hasn't loaded. Instead there's a
              grey background with the text: "This XML file does not appear to have any
              style information associated with it." If you google on that plus "SVG"
              you'll find the reason why. In short if the author had added the attribute:

              xmlns="http://www.w3.org/2000/svg"

              then the SVG document would load, and then the script would have something
              to access when you click the button.

              I wanted to thank you for your time to respond to my question!


              You're very welcome. :-)

              There are a couple of demos I have on my site showing how to script across
              the <object> and <embed> tags in both IE+ASV and in FF. They are heavily
              commented to explain how things work.

              http://jwatt.org/svg/demos/scripting-across-embed.html
              http://jwatt.org/svg/demos/scripting-across-object.html

              I hope you find them informative.

              -Jonathan

              -j
              > --- In svg-developers@yahoogroups.com, Jonathan Watt <wattie@g...>
              > wrote:
              > >
              > > Hi,
              > >
              > > The problem is likely that the SVG document hasn't yet loaded when
              > draw() is
              > > called. Instead of calling it in the <script> element, call it
              > onload. This
              > > should work I think:
              > >
              > > <html>
              > > <body onload="draw();">
              > > <EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="canvas.svg" />
              > > <script language="javascript">
              > >
              > > var svgDocument;
              > >
              > > function draw() {
              > > var svgns = "http://www.w3.org/2000/svg";
              > >
              > > svgDocument = this.document.mydoc.getSVGDocument();
              > > var shape = svgDocument.createElementNS('
              > > http://www.w3.org/2000/svg','circle');
              > >
              > > shape.setAttributeNS(null, 'cx', 25);
              > > shape.setAttributeNS(null, 'cy', 25);
              > > shape.setAttributeNS(null, 'r', 20);
              > > shape.setAttributeNS(null, 'fill', 'green');
              > > svgDocument.documentElement.appendChild(shape);
              > > }
              > >
              > > </script>
              > > <p>testing</p>
              > > </body>
              > > </html>
              > >
              > > BTW, the JavaScript console is very useful in finding errors. See
              > Tools >
              > > JavaScript Console from the menubar. getSVGDocument() will have
              > returned
              > > null, so likely there was an error for the next line.
              > >
              > > Regards,
              > > Jonathan
              > >


              [Non-text portions of this message have been removed]
            Your message has been successfully submitted and would be delivered to recipients shortly.