为何向父元素追加<rect>元素后无法渲染？

核心问题出在SVG元素的命名空间处理上：

• 普通document.createElement('rect')创建的元素属于HTML命名空间（http://www.w3.org/1999/xhtml），而SVG容器仅识别SVG专属命名空间（http://www.w3.org/2000/svg）下的元素。即便你把这个元素追加到SVG节点下，它在DOM树中可见，但浏览器不会将其作为SVG图形元素渲染。
• 使用innerHTML添加时，浏览器会自动识别SVG上下文，将字符串中的<rect>元素创建在SVG命名空间下，因此能正常显示。手动删除重加如果是用正确的命名空间创建元素，自然也能被渲染。
• 克隆SVG实例（比如cloneNode(true)）本身会保留原SVG的命名空间，但后续追加元素时若忽略命名空间要求，就会触发这个问题。

正确的SVG元素创建方式 #

要让追加的元素正常渲染，必须用createElementNS指定SVG命名空间：

// 创建SVG命名空间下的rect元素
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
// 设置属性
rect.setAttribute('x', '20');
rect.setAttribute('y', '20');
rect.setAttribute('width', '40');
rect.setAttribute('height', '40');
rect.setAttribute('fill', '#ff4444');
// 追加到目标SVG
document.querySelector('#map svg').appendChild(rect);

内容的提问来源于stack exchange，提问作者martin.p