Как создать правильный элемент SVG с JavaScript

Question

Я работал с SVG и создал элемент SVG.Я добавил элемент <rect> непосредственно в svg с помощью html, а затем я создал новый элемент (без пространства имен) <circle> с помощью javascript и добавил его к элементу svg.Элемент <rect> отображается в окне просмотра svg, но элемент <circle> не отображается.

Я получил <rect> и <circle> на консоли и проверил конструктор.Элемент <rect> вернул SVGRectElement, но <circle> вернул HTMLUnknownElement.Я создал новый элемент <circle> (с пространством имен: https://www.w3.org/2000/svg) и проверил конструктор, который возвратил Element.

в любом случае, добавив элемент namespaced и non-spacespaced <circle> кsvg не появилось в окне svg. Так как мне создать распознанный элемент svg с javascript, который будет возвращать SVGCircleElement?.

   var circle = document.createElement('circle');
    circle.setAttribute('cx', '10');
    circle.setAttribute('cy', '10');  
    circle.setAttribute('r', '30');
    circle.setAttribute('fill', 'red');

    var circle_2 = document.createElementNS('https://www.w3.org/2000/svg','circle');
    circle.setAttribute('cx', '5');
    circle.setAttribute('cy', '20');  
    circle.setAttribute('r', '30');
    circle.setAttribute('fill', 'blue');

    var svg = document.getElementById('svgx');
    var rect = document.getElementById('svgrect');
    svg.appendChild(circle);
    svg.appendChild(circle_2);

    console.log(svg.constructor); // SVGSVGElement() { [native code] }
    console.log(rect.constructor); // HTMLRectElement() { [native code] }
    console.log(circle.constructor); // HTMLUnknownElement() { [native code] }
    console.log(circle_2.constructor); // Element() { [native code] }

<svg style='width: 100%;' id='svgx'>
<rect x='5' y='5' width='50' height='30' fill='black' id='svgrect'>
</svg>

Answer 1

Удалите «s» из «https».

var circle_2 = document.createElementNS('http://www.w3.org/2000/svg','circle');

Хотя это выглядит как URL. Это действительно просто строковая константа, которая указывает, что этот XML-файл является SVG-файлом. Константа пространства имен должна быть точно такой, как представлена ​​здесь.

Также вам нужно изменить circle на circle_2 для этого раздела кода.

var circle_2 = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle_2.setAttribute('cx', '5');
circle_2.setAttribute('cy', '20');  
circle_2.setAttribute('r', '30');
circle_2.setAttribute('fill', 'blue');

var svg = document.getElementById('svgx');
var rect = document.getElementById('svgrect');
svg.appendChild(circle_2);

<svg style='width: 100%;' id='svgx'>
<rect x='5' y='5' width='50' height='30' fill='black' id='svgrect'>
</svg>