使用JavaScript创建并操作SVG元素失效问题求助

尝试通过JavaScript创建SVG元素并添加属性，元素已成功插入到DOM中（可通过浏览器审查元素看到），但无法正常渲染显示；将生成的SVG代码复制到其他位置却能正常显示。

原始代码 #

JavaScript部分 #

const makeSVG = (path) => {
    const xmlns = "http://www.w3.org/2000/svg";
    const viewbox = "0 0 40 40";
    const width = "40";
    const height = "40";

    const svgIcon = document.createElement("svg");
    svgIcon.setAttribute("xmlns", xmlns);
    svgIcon.setAttribute("viewBox", viewbox);
    svgIcon.setAttribute("width", width);
    svgIcon.setAttribute("height", height);
    svgIcon.innerHTML = path;

    return svgIcon;
};

const generatedSVGIcon = makeSVG(
    `<path d="M19,6H13V3a1,1,0,0,0-2,0V6H5a5.006,5.006,0,0,0-5,5v4a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V11A5.006,5.006,0,0,0,19,6Zm-9,4h1a1,1,0,0,1,0,2H10a1,1,0,0,1,0-2ZM5,16a1,1,0,1,1,1-1A1,1,0,0,1,5,16Zm1-4H5a1,1,0,0,1,0-2H6a1,1,0,0,1,0,2Zm9,4H9a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,19,16Zm0-4H15a1,1,0,0,1,0-2h4a1,1,0,0,1,0,2Z"/>`
);

const element = document.getElementById("element");
element.append(generatedSVGIcon);

HTML部分 #

<div id="element"></div>

问题原因 #

SVG属于XML命名空间下的元素，不能使用普通的document.createElement()创建——这种方式创建的元素属于HTML命名空间，即便手动添加xmlns属性，浏览器也无法正确识别其为SVG元素，导致无法渲染。

解决方案 #

使用document.createElementNS()方法，传入SVG的命名空间http://www.w3.org/2000/svg来创建SVG元素，确保元素属于正确的命名空间。

修正后的JavaScript代码 #

const makeSVG = (path) => {
    const xmlns = "http://www.w3.org/2000/svg";
    const viewbox = "0 0 40 40";
    const width = "40";
    const height = "40";

    // 使用createElementNS创建SVG命名空间下的元素
    const svgIcon = document.createElementNS(xmlns, "svg");
    svgIcon.setAttribute("viewBox", viewbox);
    svgIcon.setAttribute("width", width);
    svgIcon.setAttribute("height", height);
    svgIcon.innerHTML = path;

    return svgIcon;
};

const generatedSVGIcon = makeSVG(
    `<path d="M19,6H13V3a1,1,0,0,0-2,0V6H5a5.006,5.006,0,0,0-5,5v4a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V11A5.006,5.006,0,0,0,19,6Zm-9,4h1a1,1,0,0,1,0,2H10a1,1,0,0,1,0-2ZM5,16a1,1,0,1,1,1-1A1,1,0,0,1,5,16Zm1-4H5a1,1,0,0,1,0-2H6a1,1,0,0,1,0,2Zm9,4H9a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,19,16Zm0-4H15a1,1,0,0,1,0-2h4a1,1,0,0,1,0,2Z"/>`
);

const element = document.getElementById("element");
element.append(generatedSVGIcon);

说明：使用createElementNS创建SVG元素后，无需手动设置xmlns属性——该方法会自动为元素添加正确的命名空间属性，浏览器能正确识别并渲染SVG内容。

内容的提问来源于stack exchange，提问作者Kevin Mahrous