使用JS向DOM追加SVG元素但无法正常视觉渲染如何解决？

核心错误是SVG元素属于SVG命名空间的XML元素，直接使用document.createElement创建的是HTML命名空间下的普通元素，浏览器不会将其识别为可渲染的SVG节点，因此设置的宽高、背景样式都不会生效。

替换创建SVG元素的API为带命名空间的document.createElementNS即可，修正后的完整代码如下：

// 第一个参数固定为SVG的标准命名空间地址
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];
div.appendChild(svgBox);

• 静态HTML中直接写<svg>标签可以正常渲染，是因为浏览器的HTML解析器会自动识别<svg>标签，自动将其分配到正确的SVG命名空间下，无需手动处理。
• 后续创建所有SVG子元素（比如<rect>、<path>、<circle>等）都需要使用document.createElementNS传入SVG命名空间创建，否则也会出现无法渲染的问题。

内容的提问来源于stack exchange，提问作者Jacob Walls