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

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

Expand Messages
  • yannick.bochatay@free.fr
    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
    • Show all 12 messages in this topic