Question

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

这个过程适用于圆形和椭圆形，但不一定用矩形和直线。

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

奇怪（在Chrome＆amp; FF中测试）：如果你从dom（ctrl-x）中删除矩形或直线并重新插入它们（你必须点击其间的不同元素来更新dom），然后他们出现了。

Here's实验的小提琴。

这是代码：

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);

Answer 1

你在矩形和线条元素的命名空间中输入错误它是w3而不是w3c

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.w3.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.w3.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);

container.appendChild(svg);

<div id="container"></div>

用JS创建SVG元素（bug？）

1 个答案: