Javascript添加的动态svg元素不'；行不通

我真的很困惑。我有一个静态SVG元素，可以很好地显示，但是当我从Javascript添加相同的元素时，它不会显示。这是为什么

函数doit（）
{
var svgdiv=document.getElementById（'svg1'）；
对于（变量k=1；k<3；++k）
{
var svg=document.createElement（'svg'）；
setAttribute（'width'，100）；
setAttribute（'height'，100）；
log（svg）；
var c=document.createElement（'circle'）；
c、 setAttribute（'cx'，50）；
c、 setAttribute（'cy'，50）；
c、 setAttribute（'r'，40）；
c、 setAttribute（'stroke'，'green'）；
c、 setAttribute（'stroke-width'，4）；
c、 setAttribute（'fill'，'yellow'）；
svg.appendChild（c）；
svgdiv.appendChild（svg）；
}
}
window.onload=doit；

使用

而不是

document.createElement('svg')

说明：

SVG元素必须在SVG命名空间中创建，因此不能由createElement创建，而必须使用CreateElements提供SVG命名空间作为第一个参数

createElement基本上创建名为svg和circle的html元素，而不是svg元素

text/html实际上没有名称空间，因此html解析器在遇到

元素时会神奇地切换到SVG名称空间。如果将mime类型更改为某些XML名称空间，例如，则在根

元素和

元素上都需要一个xmlns属性

函数doit（）
{
var svgdiv=document.getElementById（'svg1'）；
对于（变量k=1；k<3；++k）
{
var svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
setAttribute（'width'，100）；
setAttribute（'height'，100）；
log（svg）；
var c=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
c、 setAttribute（'cx'，50）；
c、 setAttribute（'cy'，50）；
c、 setAttribute（'r'，40）；
c、 setAttribute（'stroke'，'green'）；
c、 setAttribute（'stroke-width'，4）；
c、 setAttribute（'fill'，'yellow'）；
svg.appendChild（c）；
svgdiv.appendChild（svg）；
}
}
window.onload=doit；

奇怪。为什么第一个圆圈会出现？我没有提到SVG名称空间。第一个圆圈出现是因为浏览器知道在

元素中找到

元素时使用哪个名称空间。它有上下文。根据定义，调用

createElement（“circle”）

将在“default”名称空间中创建新元素，对于浏览器来说，该名称空间是HTML，而不是SVG。

document.createElement('svg')