Создайте элемент SVG DOM из строки

Как я могу создать элемент SVG DOM из String?

Пример:

var svgStr = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><path id="svg_1" d="m118,242l64,-153l63,157c0,0 45,-71 49,-68c4,3 11,146 12,146c1,0 -173,-7 -173,-7c0,0 -61,-72 -61,-72c0,0 110,-156 46,-3z" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#995757"/></g></svg>';

Ответ 1

Вы можете использовать DOMParser для синтаксического анализа XML-строки.

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

Корневым элементом для проанализированной строки будет doc.documentElement

Для правильной работы кросс-браузера вам необходимо задать пространство имен html, то есть ваша строка должна выглядеть так:

var svg2='<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" ...

Ответ 2

Предполагая, что вы используете JavaScript, вы можете просто передать эту строку как innerHTML существующего элемента, полученного через DOM API:

var svg2 = "<svg ...> ... </svg>";
var container = document.getElementById("container");
container.innerHTML = svg2;

Смотрите: JSFiddle

Ответ 3

Чтение и запись innerHTML SVG в HTML, кажется, хорошо работает, за исключением Internet Explorer (9-11): http://cs.sru.edu/~ddailey/svg/IframeSVG.htm. Если вам нужна совместимость с IE (как в реальном веб-приложении), используйте методы DOM для создания подходящего контейнера (объект, iframe или встраивание) и создайте SVG, один дочернийNode за раз, с помощью DOM-методов внутри этого контейнера. ) Это немного хлопот, но основы охватываются http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_HTML.