использования SVG - добавить в группу

Question

ПРОЕКТ

Я включаю SVG в моем проекте, используя <use ...></use> следующим образом:

<use xlink:href="myMap.svg#status-map"></use> 

Когда осмотрены в браузере это производит:

<svg id="status-map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.244px" height="907.087px" viewBox="64.094 122.25 985.889 657.072" enable-background="new 0 0 1247.244 907.087" xml:space="preserve"> 
    <g id="road">...</g> 
    <g id="river">...</g> 
    <g id="station">...</g> 
    etc etc etc 
</svg> 

ПРОБЛЕМА

Что мне нужно сделать, чтобы сгруппировать внутренние элементы <g></g> поэтому код становится:

<svg id="status-map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.244px" height="907.087px" viewBox="64.094 122.25 985.889 657.072" enable-background="new 0 0 1247.244 907.087" xml:space="preserve"> 
    <g id="container"> // <-- new container 
    <g id="road">...</g> 
    <g id="river">...</g> 
    <g id="station">...</g> 
    etc etc etc 
    </g> 
</svg> 

Я попытался извлечения и окружив его с innerHTML, но это не удается с SVG файлов/кода.

ТАКЖЕ ПРОБОВАЛИ

Я также попытался просто поставить <use> в <g> элемента, но это не работает.

Причины мне нужно сделать это, я использую SVGPAN, чтобы позволить мне увеличивать и уменьшать масштаб, и сопротивление ... это требует внутренних <g> элементов должны быть завернуты в наружном

ли в любом случае, чтобы это сделать?

Answer 1

Вы можете управлять DOM SVG с JS:

var svg = document.getElementById("svg"); 
var svgNS = svg.namespaceURI; 

var e = document.createElementNS(svgNS, 'g'); 
e.setAttribute('id', 'container'); 

while(svg.firstChild) { 
    e.appendChild(svg.firstChild); 
} 

svg.appendChild(e); 

Plunk

См How do I manipulate the SVG DOM and create elements?