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

Re: [svg-developers] Loading SVG images dynamically and then accessing the dom

Expand Messages
  • 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 1 of 12 , Nov 17, 2012
    • 0 Attachment
      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 2 of 12 , Nov 17, 2012
      • 0 Attachment
        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 3 of 12 , Nov 18, 2012
        • 0 Attachment
          --- 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 4 of 12 , Nov 18, 2012
          • 0 Attachment
            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 5 of 12 , Nov 19, 2012
            • 0 Attachment
              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 6 of 12 , Nov 19, 2012
              • 0 Attachment
                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 7 of 12 , Nov 19, 2012
                • 0 Attachment
                  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 8 of 12 , Nov 19, 2012
                  • 0 Attachment
                    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 9 of 12 , Nov 19, 2012
                    • 0 Attachment
                      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 10 of 12 , Nov 20, 2012
                      • 0 Attachment
                        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 11 of 12 , Nov 20, 2012
                        • 0 Attachment
                          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.