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

Loading SVG images dynamically and then accessing the dom

Expand Messages
  • Pranav Lal
    Hi all, I am trying to create an application that does the following. 1. The user is presented with a form where he can brows to a svg file on his computer. 2.
    Message 1 of 12 , Nov 17, 2012
      Hi all,

      I am trying to create an application that does the following.
      1. The user is presented with a form where he can brows to a svg file on his
      computer.
      2. The svg is uploaded to the server.
      3. A HTML page is returned with the SVG file.
      4. The page has java script in it which will allow me to do things like
      capture attribute values so, if the user moves the mouse over a line
      element, then the attributes of the line should be captured in a set of
      variables. Yes, the file will be modified by the server to include the
      relevant code.

      I am a tad confused about how to start. Should I imbed the svg in the HTML
      using the object tag? Has anyone done anything like this?

      I have found some promising material at

      http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-j
      avascript/3379830#3379830

      Any thoughts?
      Pranav
    • Marty Sullivan
      Hi Pranav, It sounds like your plan is doable. Personally, I would use the tag instead of . You also don t have to embed your script in the SVG
      Message 2 of 12 , Nov 17, 2012
        Hi Pranav,

        It sounds like your plan is doable. Personally, I would use the <embed> tag
        instead of <object>. You also don't have to embed your script in the SVG
        files themselves unless you also plan to use them standalone; you can
        access the svg dom directly from the html script if you prefer.

        Marty

        On Sat, Nov 17, 2012 at 10:00 AM, Pranav Lal <pranav.lal@...> wrote:

        > **
        >
        >
        > Hi all,
        >
        > I am trying to create an application that does the following.
        > 1. The user is presented with a form where he can brows to a svg file on
        > his
        > computer.
        > 2. The svg is uploaded to the server.
        > 3. A HTML page is returned with the SVG file.
        > 4. The page has java script in it which will allow me to do things like
        > capture attribute values so, if the user moves the mouse over a line
        > element, then the attributes of the line should be captured in a set of
        > variables. Yes, the file will be modified by the server to include the
        > relevant code.
        >
        > I am a tad confused about how to start. Should I imbed the svg in the HTML
        > using the object tag? Has anyone done anything like this?
        >
        > I have found some promising material at
        >
        >
        > http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-j
        > avascript/3379830#3379830
        >
        > Any thoughts?
        > Pranav
        >
        >
        >


        [Non-text portions of this message have been removed]
      • Pranav Lal
        Hi Marty, Many thanks for your message.
        Message 3 of 12 , Nov 17, 2012
          Hi Marty,
          Many thanks for your message.
          <snip you can
          access the svg dom directly from the html script if you prefer.
          PL] Do you have any pointers on how to do this?

          Pranav
        • joe.doll@ymail.com
          ... Hi Pranav, I think we do the same thing that you are talking about. We use the embed tag like Marty suggested to you. When we bring in the file from the
          Message 4 of 12 , Nov 18, 2012
            --- In svg-developers@yahoogroups.com, "Pranav Lal" <pranav.lal@...> wrote:
            >
            > Hi Marty,
            > Many thanks for your message.
            > <snip you can
            > access the svg dom directly from the html script if you prefer.
            > PL] Do you have any pointers on how to do this?
            >
            > Pranav
            >

            Hi Pranav,

            I think we do the same thing that you are talking about. We use the embed tag like Marty suggested to you. When we bring in the file from the server, we parse it to the DOM. We do that with the dump() command, but the syntax varies with the browser. We put the entire file into a single group, then we attach the group to the DOM. A key question is whether you want to work with the file once you load it.

            Our embed tag looks like this.

            <embed id="hom_img" width="744px" height="652px"'
            'type="image/svg+xml" src="home_imgs.svg">'

            We establish the element we attach to like this.

            htmlObjImgs = document.getElementById("hom_img");
            SVGDocImgs = htmlObjImgs.getSVGDocument();
            SVGRootImgs = SVGDocImgs.documentElement;

            Then we attach the group to SVGRootImgs
          • Marty Sullivan
            Last I checked, you could get it by doing something like: var svgDoc = document.getElementById( myEmbed ).getSVGDocument(); You would then interact with the
            Message 5 of 12 , Nov 18, 2012
              Last I checked, you could get it by doing something like:

              var svgDoc = document.getElementById("myEmbed").getSVGDocument();

              You would then interact with the SVG by using the svgDoc variable in the
              same manner you would from a script inside the SVG.

              Marty

              On Sat, Nov 17, 2012 at 9:25 PM, Pranav Lal <pranav.lal@...> wrote:

              > **
              >
              >
              > Hi Marty,
              > Many thanks for your message.
              > <snip you can
              >
              > access the svg dom directly from the html script if you prefer.
              > PL] Do you have any pointers on how to do this?
              >
              > Pranav
              >
              >
              >


              [Non-text portions of this message have been removed]
            • yannick.bochatay@free.fr
              Hi, personally, since it s possible in modern browsers, I would put the svg directly in html. And you can load and parse your file with an ajax call : var r =
              Message 6 of 12 , Nov 19, 2012
                Hi,
                personally, since it's possible in modern browsers, I would put the svg directly in html.
                And you can load and parse your file with an ajax call :

                var r = new XMLHttpRequest();
                r.open("GET", "myFile.svg",true);
                r.onreadystatechange = function () {

                if (this.readyState != 4 || this.status != 200) return;

                var parser = new DOMParser();
                var doc = parser.parseFromString( this.responseText, "image/svg+xml");
                var svg = doc.documentElement;
                document.getElementById("myHtmlContainer").appendChild(svg);
                };
                r.send();


                Yannick

                ----- Mail original -----
                De: "joe.doll@..." <Joe.Doll@...>
                À: svg-developers@yahoogroups.com
                Envoyé: Dimanche 18 Novembre 2012 22:18:54
                Objet: [svg-developers] Re: Loading SVG images dynamically and then accessing the dom








                --- In svg-developers@yahoogroups.com , "Pranav Lal" <pranav.lal@...> wrote:
                >
                > Hi Marty,
                > Many thanks for your message.
                > <snip you can
                > access the svg dom directly from the html script if you prefer.
                > PL] Do you have any pointers on how to do this?
                >
                > Pranav
                >

                Hi Pranav,

                I think we do the same thing that you are talking about. We use the embed tag like Marty suggested to you. When we bring in the file from the server, we parse it to the DOM. We do that with the dump() command, but the syntax varies with the browser. We put the entire file into a single group, then we attach the group to the DOM. A key question is whether you want to work with the file once you load it.

                Our embed tag looks like this.

                <embed id="hom_img" width="744px" height="652px"'
                'type="image/svg+xml" src="home_imgs.svg">'

                We establish the element we attach to like this.

                htmlObjImgs = document.getElementById("hom_img");
                SVGDocImgs = htmlObjImgs.getSVGDocument();
                SVGRootImgs = SVGDocImgs.documentElement;

                Then we attach the group to SVGRootImgs
              • Erik Dahlstrom
                ... You can also just use the XMLHttpRequest.responseXML attribute[1], then you don t need to create a new DOMParser for parsing the result. For some examples
                Message 7 of 12 , Nov 19, 2012
                  On Mon, 19 Nov 2012 10:55:54 +0100, <yannick.bochatay@...> wrote:

                  > Hi,
                  > personally, since it's possible in modern browsers, I would put the svg
                  > directly in html.
                  > And you can load and parse your file with an ajax call :
                  >
                  > var r = new XMLHttpRequest();
                  > r.open("GET", "myFile.svg",true);
                  > r.onreadystatechange = function () {
                  >
                  > if (this.readyState != 4 || this.status != 200) return;
                  >
                  > var parser = new DOMParser();
                  > var doc = parser.parseFromString( this.responseText, "image/svg+xml");
                  > var svg = doc.documentElement;
                  > document.getElementById("myHtmlContainer").appendChild(svg);
                  > };
                  > r.send();

                  You can also just use the XMLHttpRequest.responseXML attribute[1], then
                  you don't need to create a new DOMParser for parsing the result. For some
                  examples that work in all browsers see [2].


                  [1] http://www.w3.org/TR/XMLHttpRequest/#the-responsexml-attribute
                  [2] http://stackoverflow.com/a/7986519/109374

                  --
                  Erik Dahlstrom, Core Technology Developer, Opera Software
                  Co-Chair, W3C SVG Working Group
                  Personal blog: http://my.opera.com/macdev_ed
                • Pranav Lal
                  Hi all, My objective is to trap the mouseover and other mmouse related events and display some attributes I capture from the clicked element. I do not want to
                  Message 8 of 12 , Nov 19, 2012
                    Hi all,

                    My objective is to trap the mouseover and other mmouse related events and display some attributes I capture from the clicked element. I do not want to draw anything. The idea is to create an accessible SVG reader. The user would upload a SVG file. The file would be displayed in the browser. The mouse would be moved to the origin, namely 0,0. The user then starts moving the mouse. As soon as the mouse moves on to a SVG element, data about the element will be sent to the screen reader of the user or perhaps, spoken as audio.

                    As of now, I am trying to get the first part working that is, trapping the events and displaying attribute information.

                    Given the above use case, am I correct in thinking that using the imbed tag would be the correct approach?

                    Pranav
                  • yannick.bochatay@free.fr
                    Thanks Erik, I had foolishly never thought it would work so simply with responseXML. Pranav, I think the best way is to get rid of embed or object tags. Then
                    Message 9 of 12 , Nov 19, 2012
                      Thanks Erik, I had foolishly never thought it would work so simply with responseXML.
                      Pranav, I think the best way is to get rid of embed or object tags. Then you can access easily every HTML and SVG elements :

                      <svg width="300" height="300">
                      <circle r="30" cx="50" cy="50"/>
                      <rect x="100" y="100" width="50" height="100"/>
                      </svg>
                      <div></div>
                      <script>
                      var svg = document.querySelector('svg');
                      var div = document.querySelector('div');

                      svg.addEventListener("mouseover",function(e) {
                      var target = e.target;
                      var attrs = target.attributes;
                      var html = target.tagName+'<br/>';

                      for (var i=0,N=attrs.length;i<N;i++) {
                      html += attrs[i].name+'='+attrs[i].value +"<br/>";
                      }
                      div.innerHTML = html;
                      },false);
                      </script>

                      See http://jsfiddle.net/ybochatay/U9wZc/ for live example

                      Yannick

                      ----- Mail original -----
                      De: "Pranav Lal" <pranav.lal@...>
                      À: svg-developers@yahoogroups.com
                      Envoyé: Lundi 19 Novembre 2012 15:08:15
                      Objet: RE: [svg-developers] Re: Loading SVG images dynamically and then accessing the dom






                      Hi all,

                      My objective is to trap the mouseover and other mmouse related events and display some attributes I capture from the clicked element. I do not want to draw anything. The idea is to create an accessible SVG reader. The user would upload a SVG file. The file would be displayed in the browser. The mouse would be moved to the origin, namely 0,0. The user then starts moving the mouse. As soon as the mouse moves on to a SVG element, data about the element will be sent to the screen reader of the user or perhaps, spoken as audio.

                      As of now, I am trying to get the first part working that is, trapping the events and displaying attribute information.

                      Given the above use case, am I correct in thinking that using the imbed tag would be the correct approach?

                      Pranav
                    • Manfred Staudinger
                      Hi Pranav, A few month ago I had a similar requirement to display an interactive floor plan. I used XSLT 2.0 in the browser (aka Saxon-CE) and built a demo
                      Message 10 of 12 , Nov 19, 2012
                        Hi Pranav,

                        A few month ago I had a similar requirement to display an interactive
                        floor plan. I used XSLT 2.0 in the browser (aka Saxon-CE) and built a
                        demo which can be seen here:
                        http://test.rudolphina.org/Plaene/Plan/svg-t5-011.xhtml
                        A short description can be found at
                        http://www.saxonica.com/ce/doc/demonstrations/intro.xml
                        Its mor a proof of concept but runs fine in Opera and Chrome.

                        Regards,
                        Manfred

                        On 19/11/2012, Pranav Lal <pranav.lal@...> wrote:
                        > Hi all,
                        >
                        > My objective is to trap the mouseover and other mmouse related events and
                        > display some attributes I capture from the clicked element. I do not want to
                        > draw anything. The idea is to create an accessible SVG reader. The user
                        > would upload a SVG file. The file would be displayed in the browser. The
                        > mouse would be moved to the origin, namely 0,0. The user then starts moving
                        > the mouse. As soon as the mouse moves on to a SVG element, data about the
                        > element will be sent to the screen reader of the user or perhaps, spoken as
                        > audio.
                        >
                        > As of now, I am trying to get the first part working that is, trapping the
                        > events and displaying attribute information.
                        >
                        > Given the above use case, am I correct in thinking that using the imbed tag
                        > would be the correct approach?
                        >
                        > Pranav
                        >
                        >
                        >
                        > ------------------------------------
                        >
                        > -----
                        > 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
                        >
                        >
                        >
                        >
                      • Pranav Lal
                        Hi Yannick, Many thanks. I ll directly put the SVG into my HTML and use your code as a start. Pranav
                        Message 11 of 12 , Nov 20, 2012
                          Hi Yannick,

                          Many thanks. I'll directly put the SVG into my HTML and use your code as a start.

                          Pranav
                        • Pranav Lal
                          Hi Manfred, I do need Internet explorer to be supported so I don t know if your solution will work. Your product is interesting though. Pranav
                          Message 12 of 12 , Nov 20, 2012
                            Hi Manfred,

                            I do need Internet explorer to be supported so I don't know if your solution
                            will work.

                            Your product is interesting though.
                            Pranav
                          Your message has been successfully submitted and would be delivered to recipients shortly.