直接创建的SVG可正常显示，动态创建的同结构SVG为何无法显示？

我正在学习动态创建SVG元素，但遇到了问题：动态生成的SVG无法显示，而静态写在HTML里的SVG能正常显示。

我的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<script>
var d=document,ns="http://www.w3.org/2000/svg";
window.onload = S;

function S() {
var bo=d.body;
var div=C(bo,'div');
A(div,'style','width:50vw;height:50vw;');
div.innerHTML="The second (dynamically created) svg does not show up!:"
var svg=Cn(div,'svg');
A(svg,'xmlns','http://www.w3.org/2000/svg');//An(...) gives error if used
An(svg,'viewbox','0 0 22 22');
An(svg,'style','width:40vw;height:40vw;');
var path=Cn(svg,'path');
An(path,'stroke','grey');
An(path,'d','M2 16c-4-2,0-10,4-8c3-12,24 8,12 8z');
}

function C(x,y){var z=d.createElement(y);x.appendChild(z);return z;}
function Cn(x,y){var z=d.createElementNS(ns,y);x.appendChild(z);return z;}
function A(x,y,z){x.setAttribute(y,z);}
function An(x,y,z){x.setAttributeNS(ns,y,z);}

</script>
</head>
<body>
<div style="width:50vw;height:50vw;">
The first svg here shows correctly:
<svg  xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" style="width:40vw;height:40vw;">
<path stroke="grey" d="M2 16c-4-2,0-10,4-8c3-12,24 8,12 8z"></path></svg></div>
</html>

我很困惑，因为开发者工具里两个SVG的DOM结构看起来完全一致。我尝试了各种命名空间组合，折腾了好几天都没解决，求帮助。

问题根源与解决方法 #

1. 错误使用命名空间设置属性：viewbox、style、stroke、d这些都不属于SVG命名空间属性，不需要用setAttributeNS（也就是你的An函数），改用普通的setAttribute（A函数）即可。只有少数特殊属性（如XLink相关属性）才需要指定命名空间。

2. viewBox大小写敏感：SVG的视口属性是viewBox（驼峰写法），你之前写的全小写viewbox在静态HTML里可能被浏览器兼容，但动态设置时必须严格区分大小写，否则无法被正确识别。

修正后的核心代码 #

function S() {
var bo=d.body;
var div=C(bo,'div');
A(div,'style','width:50vw;height:50vw;');
div.innerHTML="The second (dynamically created) svg does not show up!:"
var svg=Cn(div,'svg');
// xmlns属性在createElementNS时已自动添加，可省略手动设置
A(svg,'viewBox','0 0 22 22'); // 修正大小写
A(svg,'style','width:40vw;height:40vw;');
var path=Cn(svg,'path');
A(path,'stroke','grey');
A(path,'d','M2 16c-4-2,0-10,4-8c3-12,24 8,12 8z');
}

内容的提问来源于stack exchange，提问作者Caleb Taylor