如何使用javascript创建有效的svg元素

我正在使用SVG，并创建了一个SVG元素。我用html将一个

元素直接添加到svg中，然后用javascript创建一个新元素（没有名称空间）

，并将其附加到svg元素中。svg视图框中显示了

元素，但未显示

元素

我在控制台上找到了

和

，并检查了构造函数。

元素返回了

SVGRectElement

，但

元素返回了

htmlunknowneelement

。我创建了一个新的

元素（名称空间：），并检查了返回

元素的构造函数

无论采用哪种方式，在svg视图框中都不会出现向svg追加带名称空间和不带名称空间的
元素的情况。那么，如何使用javascript创建一个可识别的svg元素，该元素将返回
svgcirclelement？


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.createElements（'https://www.w3.org/2000/svg","圈",；
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（圆）；
svg.appendChild（圆圈2）；
console.log（svg.constructor）；//SVGSVGElement（）{[本机代码]}
console.log（rect.constructor）；//HTMLRectElement（）{[本机代码]}
console.log（circle.constructor）；//HtmlUnknowneElement（）{[本机代码]}
console.log（circle_2.constructor）；//元素（）{[本机代码]}

从“https”中删除“s”

即使它看起来像一个URL。它实际上只是一个字符串常量，指示此XML文件是SVG文件。名称空间常量必须与此处显示的完全相同

此外，您还需要将该部分代码的
circle
更改为
circle_2


var circle_2=document.createElements（'http://www.w3.org/2000/svg","圈",；
圈_2.setAttribute（'cx'，'5'）；
圈_2.setAttribute（'cy'，'20'）；
圈_2.setAttribute（'r'，'30'）；
圆圈2.setAttribute（'fill'，'blue'）；
var svg=document.getElementById（'svgx'）；
var rect=document.getElementById（'svgrect'）；
svg.appendChild（圆圈2）

1。您需要像这样关闭
：
id='svgrect'/>
或像这样关闭
id='svgrect'>
和2。请始终使用
createElements
抱歉我在这个问题中的代码错误。我在代码中正确地关闭了所有标记，这在javascript代码中是可见的，我创建的第二个圆圈是命名空间，它返回
function Element（）{[native code]}
这也没有显示在SVG中。我已经为此采取了3天的不同方法，现在才发现在名称空间中删除“s”是解决方案。真有趣。谢谢你，保罗
var circle_2 = document.createElementNS('http://www.w3.org/2000/svg','circle');