javascript - 浏览器不渲染动态创建的 SVG 元素

Question

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

标记

我想在我的页面中结束的是这段代码:

<svg>
  <circle cx="20" cy="20" r="15"></circle>
</svg>

如果你把它粘贴到一个页面中，一切都很好，黑色圆圈被呈现!

动态创建 SVG

但是我想使用 Javascript 创建这个内容，所以我有这个:

var container = document.createElement("div");
var svg = document.createElement("svg");

var circle = document.createElement("circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);

那么，尝试在 fiddle 或浏览器中执行此操作，您会发现它不会被渲染。当您检查 HTML 时，您会看到 circle 没有占用任何空间。

问题是什么？

Answer 1

你必须使用 "document.createElementNS("http://www.w3.org/2000/svg", "svg");" 来创建 svg 元素

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);