title: importNode SVG File contents being repeated - Visual Composer
body: <p>Im doing a project and using Visual Composer. Im working with some backend rendering. Im using importNode to grab the xml from a selected svg file on the server and print it. Everything works fine except for the fact it is printing the selected option in multiple elements.</p>
  
  <p>Here is an image as to what im talking about. Whats going on here is the left box has the top svg shape selected, the middle box the heart and the right, the bottom shape. And it is echoing them in order across all 3 boxes, instead of printing just that boxes selected shape. <a href="https://i.stack.imgur.com/JNto4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNto4.png" alt="enter image description here"></a></p>
  
  <p>Here is the jQuery im using to print the xml from the file. I tried wrapping this in a .each function and it duplicated it a second time stacking 6 shapes instead of just 3 haha. Im not necessarily a whiz at this by any means, any help is greatly appreciated </p>
  
  <pre><code>jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                      //import contents
                      var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                      jQuery("span.my-svg-shape.outside").append(importedSVGRootElement);
                  },"xml");
  </code></pre>
  
  <p>Im using that because, well because its the only thing I could get to work. However now that im actually building out a page I see it is printing more than 1 time, oddly nothing else is. Ive tampered with other aspects of the element such as the icon, that works fine.</p>
  
  <p>Here is the code in full for the build of the element area we are dealing with.</p>
  
  <pre><code>var wrapper = jQuery('&lt;div class="preview_element ' +
                          'image-box" style="width: 474px; max-width: 100%; ' +
                          'overflow: hidden;"&gt;&lt;/div&gt;');
  wrapper.append('&lt;div class="img-wrap"&gt;' +
                          '&lt;img class="attachment-large" width="474" ' +
                          'src="//placehold.it/474x355"&gt;&lt;/div&gt;');
      jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                          //import contents
                          var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                          jQuery("span.my-svg-shape.outside").append(importedSVGRootElement);
                      },"xml");
      wrapper.append('&lt;div class="text-wrap"&gt;' +
                          '&lt;span class="my-svg-shape outside ' + svg_type + '"&gt;&lt;/span&gt;&lt;span class="my-svg-shape"&gt;' +
                          '&lt;i class="fa ' + icon + '"&gt;&lt;/i&gt;' +
                          '&lt;/span&gt;' +
                          '&lt;div class="callout-details-wrap"&gt;' +
                          content +
                          '&lt;/div&gt;' +
                          '&lt;/div&gt;');
                      wrapper.find('span.my-svg-shape.outside').css('fill', icon_bg_color);
                      }
  </code></pre>
  
  <p>As I said any help is greatly appreciated.</p>
  
  <p>Cheers</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/11940/raphael-schweikert">Raphael Schweikert</a> this is the correct working snippet, see his comment.</p>
  
  <pre><code>jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                      //import contents
                      var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                      wrapper.find('span.my-svg-shape.outside').append(importedSVGRootElement);
                  },"xml");
  </code></pre>