Javascript 浏览器不会呈现动态创建的SVG元素

我试图在HTML中使用SVG标记来呈现一些图形。这个问题非常棘手，因为我刚刚意识到问题在于以编程方式生成SVG

加价 我想在我的页面中结束的是以下代码片段：

您必须使用

“document.createElements（”http://www.w3.org/2000/svg“，“svg”）；”

创建svg元素

var container=document.createElement（“div”）；
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
var circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
circle.setAttribute（“cx”、“20”）；
圆圈.setAttribute（“cy”、“20”）；
圆.setAttribute（“r”、“15”）；
svg.appendChild（圆）；
container.appendChild（svg）；
文件.正文.附件（容器）而您必须使用
document.createElements（“http://www.w3.org/2000/svg“，“svg”）
创建父svg元素，
对于子元素，不严格要求您使用该方法来在页面上获得正常运行的图形。如果您使用的是更复杂的图像，具有多个路径、定义、样式、标题等，例如从绘图程序导出的内容，则为每个子级调用
createElements（）
可能会变得特别麻烦

对我来说，一种快速有效的方法是创建父svg元素，然后一次性将其所有内容添加为
innerHTML
。您的具体示例可以这样解决：

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgContent = '<circle cx="20" cy="20" r="15"></circle>';

svg.innerHTML = svgContent;
container.appendChild(svg);
document.body.appendChild(container);

var container=document.createElement（“div”）；
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
var svgContent=''；
svg.innerHTML=svgContent；
container.appendChild（svg）；
文件.正文.附件（容器）；
可能重复我在
svg
中尝试过的，但我认为在
圈中不需要它。。。我明白了，谢谢。但是为什么在
圈中需要它呢？
svg
中的
xmlns
是一个全局包含的ns，因此它应该适用于所有嵌套元素……您必须从svg名称空间（
）创建svg dom元素http://www.w3.org/2000/svg“
）通过调用
document.createElements
而不是
document.createElement
是的，我理解。因此，我尝试的是仅在
svg
元素上调用
createelements
。根据您的回答，它没有像我在
circle
元素上同样需要
createelements
那样工作。好吧，我的问题是：为什么仅仅在
svg
上还不够？当您在svg元素上使用
xmlns
时，该元素内的所有内容都将看到模式，因此无需在
circle
上指定
xmlns
。@并且元素的名称空间在创建时设置，之后不可更改。请参见此答案