SVG 用 JS 附加到 DOM 但没有视觉呈现 [重复]答案

【问题标题】：SVG appended to DOM with JS but not visually rendering [duplicate]SVG 用 JS 附加到 DOM 但没有视觉呈现 [重复]
【发布时间】：2021-11-29 17:43:14
【问题描述】：

我正在尝试创建一个 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 不工作。我已经从一个更复杂的用例中剥离了这一点，并向自己证明了我缺少一些关键的基本显示原则。

【问题讨论】：

标签： javascript html svg

【解决方案1】：

SVG 是一个命名空间元素，因此您必须使用 createElementNS 而不是 createElement - 了解为什么要查看 this answer

这是一个工作示例：

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>

【讨论】：