В следующем коде я пытаюсь создать SVG-круг на экране двумя различными способами.
var body = document.getElementsByTagName('body')[0];
var vis = document.createElementNS("http://www.w3.org/2000/svg", "svg");
body.appendChild(vis);
vis.setAttribute('width',400);
vis.setAttribute('height',300);
var xmlString = '<circle r="300"></circle>'
, parser = new DOMParser()
, doc = parser.parseFromString(xmlString, "text/xml");
c1 = doc.firstChild;
c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute('r','300')
//for(x in c1) {c1[x] = c2[x]}
vis.appendChild(c1);
Первый способ vis.appendChild(c1); не отображается, но, если я заменю c1 в этой строке на c2, он работает.Кроме того, если я верну c1, а затем раскомментирую строку, которая в основном клонирует c2, в c1, она все равно не будет работать.
Так что я знаю, что это должно быть из-за того, что браузер не понимает, что такое «круг»."если я не использую базовое пространство имен http://www.w3.org/2000/svg, но я не знаю, как это исправить.
Вопрос : Как я могу проанализировать произвольную строку SVGвставить его в DOM и заставить браузер понять, как его отображать?