Редактирование Javascript SVG

Я хочу редактировать SVG файл непосредственно в JS без каких-либо фреймворков.

В основном у меня есть главный файл SVG, который должен содержать некоторых дочерних SVG.

Я получил содержание этих детей в Ajax, но я хотел бы вставить их в тег SVG.

Например, я создал новый тег

var svgInclude= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgInclude.setAttribute('id', 'include_1');
svgInclude.setAttribute('height', widthVis);
svgInclude.setAttribute('width', widthVis);
svg.appendChild(svgInclude);

Когда я хочу вставить XML-данные, извлеченные из этой функции:

function loadXMLDoc(url, cb) { var xmlhttp; if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) cb(xmlhttp.responseText); }; xmlhttp.open('GET', url, true); xmlhttp.send();
}

С помощью:

loadXMLDoc(host + '/svg/frame_panto_v2.svg', function(xml) { svgInclude.innerSVG(xml);
});

Это не работает, говоря, что Uncaught TypeError: Object #<svgsvgelement> has no method 'innerSVG'</svgsvgelement>. Я также пытался использовать innerHTML но я получил ту же ошибку.

Как я могу "вставить" загруженный SVG файл в тег SVG?

Спасибо за вашу помощь.

1 ответ

Используйте DOMParser для этого.

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");

который предоставит вам документ SVG, и вы можете использовать документ. documentElement для получения содержимого и importNode и appendChild для его добавления.

licensed under cc by-sa 3.0 with attribution.