浏览器不呈现动态创建的 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);

好吧，尝试在小提琴或浏览器中执行此操作，您会看到它不会被渲染。当您检查 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);

Answer 2

虽然您必须使用 document.createElementNS("http://www.w3.org/2000/svg", "svg"); 来创建父 svg 元素， 您并不严格要求对子元素使用该方法以在您的页面上获得正常运行的图形。如果您使用更复杂的图像，包括多个路径、defs、样式、标题等，例如从绘图程序导出的图像，为每个孩子调用 createElementNS() 可能会变得特别麻烦。

一种对我很有效的更快方法是创建父 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);

Answer 3

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