add ajax sourced svg group to existing canvas

Question

I have a blank svg canvas on my page

<svg 
xmlns="http://www.w3.org/2000/svg" 
version="1.1"
width="100%"
height="100%"
id="svg_canvas"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 250 250">

</svg>

I have another svg, with the following form, in an external file.

 <?xml ...>
    <svg id="external"
    ...>
      <g id="lollipop"
      ...>
        //LOTS OF VECTOR INSTRUCTIONS IN THIS GROUP
      </g>
    </svg>

I would like to ajax for the external svg and insert the lollipop group into the current canvas. I would accept answers which ajax for the entire .svg and parse out the group (id="lollipop") to insert. It may be preferable, though, to copy just the group i want and save that as a text file which can be called upon and parsed. Either way.

RestingRobot · Answer 1 · 2012-07-23T16:56:04.083

1

Using jQuery, here is the basic idea of what you want:

 //here I have a hidden div element in my document called "hiddenDiv";
 //I'm loading the SVG into the DOM via AJAX so we can access its elements.
 $("#hiddenDiv").load("/some/path/to/yourfile.svg", function(){

     //grab the content you want and add it to the canvas.
     $("#lollipop").clone().appendTo("#svg_canvas");

     //get rid of the extra unneeded svg
     $("#hiddenDiv").empty();
 }

EDIT After reading up on load, it has a nifty feature to easily do what you want:

     $("#svg_canvas").load('/some/path/to/yourfile.svg #lollipop');

link to the docs: http://api.jquery.com/load/ see "Loading Page Fragments".

edited Jul 23 '12 at 16:56

answered Jul 18 '12 at 18:37

RestingRobot

2,938
1
23
36

Thank you. My description "ajax" was incorrectly used here. Sorry. Your answer is nice, but unfortunately, it doesn't work. From what I have gathered in the past couple of days, jquery cannot be used for this without a library like jQuery SVG, which is what I ended up using. I will do a little more investigation and post a final answer. Thank you for your time. – buck54321 Jul 20 '12 at 03:34
jQuery can definitely be used. I'm speaking from experience that plain jQuery will do everything you've described. – RestingRobot Jul 20 '12 at 18:39
Specifically what does not work? Did you try my initial solution, as that should work 100% of the time. Is the load failing, or is it the append? – RestingRobot Jul 20 '12 at 18:40
Sorry about the long response times. I got the impression that jquery alone could not be used for adding elements from an external svg source from some threads I read on the topic. I don't have them all, but here is one, http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible. But then I also saw a post which mirrors your response here, http://stackoverflow.com/questions/6793312/how-to-use-jquery-in-svg-scalable-vector-graphics. I'll keep testing. As a side note. jquery's .load function is technically ajax, so my only error is in making a verb out of ajax. – buck54321 Jul 21 '12 at 12:40
Sorry I removed the criticism. I assumed that you were new to AJAX, but looking at your other posts, you're clearly not. Have you tried walking through your implementation? Is the file loaded properly? Or is the append method failing? – RestingRobot Jul 23 '12 at 17:00

add ajax sourced svg group to existing canvas

1 Answers1