Javascript 使用JS创建SVG元素（bug？）

我试图用JavaScript创建各种不同的SVG元素（圆形、矩形等），并将它们插入到先前创建的SVG容器元素（也用JavaScript创建）中

这个过程可以很好地处理一个圆和一个椭圆，但对于一个矩形和一条直线就没那么好了

元素被创建并插入到DOM中。您可以检查SVG，并在那里找到它们，但它们不会被渲染

奇怪（在Chrome&FF中测试）：如果您从dom（ctrl-x）中剪切出矩形或线条并重新插入它们（您必须在两者之间单击另一个元素以更新dom），那么它们就会显示出来

实验的小提琴

下面是代码：

var cont = document.getElementById('container');

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
svg.setAttribute("version", "1.1");
svg.setAttribute("id", "mysvg");

var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
ellipse.setAttribute("fill", "green");
ellipse.setAttribute("stroke", "black");
ellipse.setAttribute("cx", "45");
ellipse.setAttribute("cy", "45");
ellipse.setAttribute("rx", "40");
ellipse.setAttribute("ry", "20");
svg.appendChild(ellipse);

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("fill", "orange");
circle.setAttribute("stroke", "black");
circle.setAttribute("stroke-width", "1")
circle.setAttribute("cx", "70");
circle.setAttribute("cy", "60");
circle.setAttribute("r", "30");
svg.appendChild(circle);

var rect = document.createElementNS("http://www.w3c.org/2000/svg", "rect");
rect.setAttribute("fill", "red");
rect.setAttribute("stroke", "black");
rect.setAttribute("stroke-width", "1")
rect.setAttribute("x", "40");
rect.setAttribute("y", "40");
rect.setAttribute("width", "80");
rect.setAttribute("height", "50");
svg.appendChild(rect);

var line = document.createElementNS("http://www.w3c.org/2000/svg", "line");
line.setAttribute("stroke", "purple");
line.setAttribute("stroke-width", "15");
line.setAttribute("x1", "30");
line.setAttribute("y1", "170");
line.setAttribute("x2", "130");
line.setAttribute("y2", "20");
svg.appendChild(line);

cont.appendChild(svg);

---

您在名称空间中输入了rect和line元素，这是w3而不是w3c

var cont=document.getElementById（'container'）；
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（“宽度”、“200”）；
setAttribute（“高度”、“200”）；
setAttribute（“版本”、“1.1”）；
setAttribute（“id”、“mysvg”）；
var椭圆=document.createElements（“http://www.w3.org/2000/svg“，”椭圆“）；
setAttribute（“填充”、“绿色”）；
椭圆.setAttribute（“笔划”、“黑色”）；
椭圆.setAttribute（“cx”、“45”）；
椭圆.setAttribute（“cy”，“45”）；
椭圆.setAttribute（“rx”，“40”）；
椭圆.setAttribute（“ry”，“20”）；
appendChild（椭圆）；
var circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
circle.setAttribute（“填充”、“橙色”）；
circle.setAttribute（“笔划”、“黑色”）；
circle.setAttribute（“笔划宽度”、“1”）
circle.setAttribute（“cx”、“70”）；
圆圈.setAttribute（“cy”，“60”）；
圆.setAttribute（“r”、“30”）；
svg.appendChild（圆）；
var rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.setAttribute（“填充”、“红色”）；
rect.setAttribute（“笔划”、“黑色”）；
rect.setAttribute（“笔划宽度”、“1”）
矩形集合属性（“x”、“40”）；
矩形集合属性（“y”、“40”）；
rect.setAttribute（“宽度”、“80”）；
rect.setAttribute（“高度”、“50”）；
appendChild（rect）；
变量行=document.createElements（“http://www.w3.org/2000/svg“，”行“）；
line.setAttribute（“笔划”、“紫色”）；
line.setAttribute（“笔划宽度”、“15”）；
行.setAttribute（“x1”，“30”）；
行.setAttribute（“y1”、“170”）；
行.setAttribute（“x2”、“130”）；
行.setAttribute（“y2”、“20”）；
svg.appendChild（行）；
container.appendChild（svg）
哇……细节中有魔鬼，非常感谢。你不想知道我已经看了多长时间的拼写错误代码了，真是莫名其妙。把工作行放在错误行附近，这样比较容易发现。把长字符串移到它自己的常量会对你有所帮助。（var kNamespaceSVG=\“\”document.createElements（kNamespaceSVG，“line”）；好的，stackoverflow的url检测器破坏了上面的示例。不要逐字使用它。