动态创建SVG时viewBox小写致元素不显示的原因及解决方法

原因 #

SVG是基于XML的元素，属于特定命名空间，但你用普通的document.createElement()创建的是HTML命名空间下的元素。HTML里属性名不区分大小写，调用setAttribute("viewBox", "...")时，浏览器会自动把属性名转成小写的viewbox。而SVG的viewBox是XML属性，大小写敏感，小写的viewbox不被SVG解析器识别，导致元素无法正常显示。

当你在开发者工具里手动编辑并保存HTML时，浏览器会自动将该元素归入SVG命名空间，同时修正属性名为正确的viewBox，所以元素就能正常显示了。

解决方法 #

创建SVG及其内部元素时，必须使用document.createElementNS()方法，指定SVG的官方命名空间http://www.w3.org/2000/svg。这样创建的元素属于SVG命名空间，设置属性时浏览器会保留正确的大小写，也可以直接通过DOM属性设置viewBox。

修改后的代码示例 #

// 用命名空间创建SVG相关元素
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    g = document.createElementNS("http://www.w3.org/2000/svg", "g"),
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");

svg.style.display = "inline-block";
svg.style.stroke = "rgb(141, 145, 145)";
svg.style.strokeWidth = "2px";
svg.style.width = "20px";
svg.style.height = "20px";
svg.style.fill = "none";
svg.style.cursor = "pointer";
g.style.transform = "translate(7px, 7px)";

// 两种设置viewBox的方式都可行
// 方式1：使用setAttribute
svg.setAttribute("viewBox", "0 0 24 24");
// 方式2：直接设置DOM属性（更推荐，彻底避免大小写问题）
// svg.viewBox.baseVal.width = 24;
// svg.viewBox.baseVal.height = 24;
// svg.viewBox.baseVal.x = 0;
// svg.viewBox.baseVal.y = 0;

path.setAttribute("d","M 1 1 L 19 19 M 19 1 L 1 19");

// 记得将元素添加到DOM中
svg.appendChild(g);
g.appendChild(path);
document.body.appendChild(svg);

生效原理 #

用createElementNS创建的元素属于SVG命名空间，浏览器会按照XML规则处理它的属性，保留viewBox的正确大小写，SVG解析器能正常识别该属性，元素也就可以正常渲染了。

内容的提问来源于stack exchange，提问作者Patryk Gmyrek