用JS将SVG附加到DOM，但不可视地呈现

Question

我正在尝试创建一个SVG形状并将其附加到我的DOM中的元素。

下面的JS将<svg>附加到预期的节点，但不会在页面上呈现紫色背景:

const svgBox = document.createElement("svg");
svgBox.setAttribute('height', 150);
svgBox.setAttribute('width', 800);
svgBox.setAttribute('style', 'background-color:purple;');
const div = document.getElementsByTagName('div')[0];  // this does exist
div.appendChild(svgBox);

这里是一个JSFiddle，显示了等效的HTML，它可以工作(如果我把标签注释回来)，但上面的JS不起作用。我把它从一个更复杂的用例中剥离出来，并向自己证明了我遗漏了一些关键的基本显示原则。

Answer 1

SVG是一个有名称空间的元素，所以你必须使用createElementNS而不是createElement——要理解为什么要检查这个答案

下面是一个工作示例:

const svgBox = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgBox.setAttribute('height', 150);
svgBox.setAttribute('width', 800);
svgBox.setAttribute('style', 'background-color:purple;');
const div = document.getElementsByTagName('div')[0]; // this does exist
div.appendChild(svgBox);

<div>
</div>

---