Динамически добавьте полную форму svg (с чистым Javascript)

Question

Я хочу нарисовать квадрат, используя путь в SVG, созданный с помощью JS. Но браузеры не принимают это:

Javascript:

var svg = document.createElement('svg'); 
svg.width = "200"; 
svg.height = "200"; 
document.body.appendChild(svg); 

var path = document.createElement('path'); 
path.setAttribute('d','M100,0 L200,100 100,200 0,100Z'); 
path.setAttribute('fill','red'); 
svg.appendChild(path); 

HTML (выход):

<svg width="200" height="200"> 
    <path d="M100,0 L200,100 100,200 0,100Z" fill="red"/> 
</svg> 

Answer 1

createElement можно использовать только для создания элементов html. Чтобы создать элементы SVG, вы должны использовать createElementNS и предоставить пространство имен SVG в качестве первого аргумента.

Также document.body.appendChild ('svg'); Предположительно опечатка, как вы хотите, чтобы добавить элемент SVG, а не строка, содержащая текст «» SVG

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
 
svg.setAttribute('width','200'); 
 
svg.setAttribute('height','200'); 
 
document.body.appendChild(svg); 
 

 
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
 
path.setAttribute('d','M100,0 L200,100 100,200 0,100Z'); 
 
path.setAttribute('fill','red'); 
 
svg.appendChild(path);

Answer 2

Использование createElementNS вместо createElement.