JavaScript动态SVG渲染异常：生成的圆形元素不显示

你遇到的问题是SVG元素的属性被错误地添加了命名空间前缀，导致浏览器无法正确解析这些属性。你的buildNode函数中，当检测到ns属性后，所有后续属性都通过setAttributeNS(ns, ...)设置，这会给普通SVG属性（如cx、cy、r、fill等）添加上SVG命名空间的前缀，浏览器无法识别这些带前缀的属性，因此圆形元素虽然存在于DOM中，但不会被渲染。

修改buildNode函数，仅在创建SVG元素时使用createElementNS，设置普通属性时使用setAttribute（而非setAttributeNS）。只有xmlns这类本身需要命名空间的属性才需要用setAttributeNS，其他常规属性直接用普通的属性设置方法即可。

重点调整buildNode函数：

function buildNode(node = new Node("div")) {
    let nodeComp;
    // 提取命名空间属性
    const nsAttr = node.attributes?.find(attr => attr.type === "ns");
    const ns = nsAttr?.value;

    // 根据命名空间创建元素
    if (ns) {
        nodeComp = document.createElementNS(ns, node.type);
    } else {
        nodeComp = document.createElement(node.type);
    }

    if (node.attributes != null && typeof node.attributes !== "undefined" && node.attributes.length > 0) {
        for (let position = 0; position < node.attributes.length; position++) {
            const attr = node.attributes[position];
            // 跳过自定义的ns属性
            if (attr.type === "ns") continue;

            // 仅xmlns属性需要特殊处理，其余用普通setAttribute
            if (attr.type === "xmlns") {
                nodeComp.setAttributeNS("http://www.w3.org/2000/xmlns/", attr.type, attr.value);
            } else {
                nodeComp.setAttribute(attr.type, attr.value);
            }
        }
    }

    if (node.content != null && typeof node.content !== "undefined") {
        nodeComp.innerHTML = node.content;
    }

    if (node.childNodes != null && typeof node.childNodes !== "undefined" && node.childNodes.length > 0) {
        for (let childNode = 0; childNode < node.childNodes.length; childNode++) {
            nodeComp.insertAdjacentElement("beforeend", buildNode(node.childNodes[childNode]));
        }
    }

    return nodeComp;
}

• 可以移除自定义的ns属性，直接通过元素类型判断是否使用SVG命名空间（比如判断node.type是否为svg、circle、filter等SVG专属标签），让代码更简洁。
• 重复渲染多个SVG实例时，确保id的唯一性（你的代码已处理这一点，比如gen1、circle1），避免ID冲突导致渐变、滤镜失效。

内容的提问来源于stack exchange，提问作者Steven Jon Smith