Add element to existing group using svg.js

Question

I have a loaded svg map, and then I create some paths that I want to be added inside a group of the loaded SVG, but I cant.

Here I load my map

var mapa = SVG('map').size('100%', '100%');

var mapLoad = new XMLHttpRequest();
mapLoad.open('GET', 'img/my_map.svg', true);
mapLoad.send();
mapLoad.onload = function(e) {
  mapa.svg(mapLoad.responseText);
}

---

Then I create some paths in the SVG

var plane = mapa.path('...');

---

And this is the actual result

What I want is to add all those paths inside the "#content" group

Answer 1

Your new mapa is an element within your markup, not the root element, so just use that element when you create new content.

var mapa = SVG('map').size('100%', '100%');

var mapLoad = new XMLHttpRequest();
mapLoad.open('GET', 'img/my_map.svg', true);
mapLoad.send();
mapLoad.onload = function(e) {
  mapa.svg(mapLoad.responseText);
  mapa = SVG.get('mapa');
  var plane = mapa.path('...');
}