Недавно я искал что-то похожее на это, но мне нужно было обновить часть существующего SVG, поэтому использование innerHTML для меня не вариант. В итоге я взглянул на то, как Canvg справился с этим, и придумал:
var $contentToReplace = $('svg .some-class');
$contentToReplace.empty();
var content = new DOMParser().parseFromString(newContent, 'text/xml');
// content.children is an HTMLCollection, so using Array.prototype.slice to make a copy. if you
// don't make a copy, items will be removed from content.children each time appendChild is called,
// which will mess up the loop iteration
var children = Array.prototype.slice.call(content.children);
for (var i = 0; i < children.length; i++) {
$contentToReplace.get(0).appendChild(children[i]);
}
Вы можете проверить, как они это сделали в Canvg - просто найдите метод parseXml.
Вы также можете передать различные MIME-типы методу parseFromString. Однако поддержка браузеров в них немного различается - например, MIME-тип image / svg + xml не поддерживается в IE9 и более ранних версиях.
Изменение типа MIME просто меняет тип документа, который вы получите обратно. Использование text / xml возвращает XMLDocument, который в данном случае работает нормально.