如何用document.createElement创建SVG空path元素？动态SVG渲染异常求助

兄弟，先纠正你一个误区：SVG元素渲染不出来跟标签是闭合形式还是自闭合形式半毛钱关系都没有——<path></path>和<path/>在浏览器眼里是完全等价的，只是序列化后的字符串写法不同而已。你折腾这么久的问题，根源其实是创建SVG元素的方式错了！

SVG属于XML命名空间，不能用普通的document.createElement来创建，必须用document.createElementNS指定SVG的命名空间才行。普通的createElement会把path当成普通HTML元素，浏览器根本不会按SVG规则解析它，自然就渲染不出来。

给你改好的代码：

// SVG的命名空间是固定的，直接用这个值就行
const svgNamespace = "http://www.w3.org/2000/svg";
// 用createElementNS创建SVG命名空间下的path元素
let b1b2 = document.createElementNS(svgNamespace, 'path'); 
b1b2.setAttribute('d', 'M0 0 L100 100'); 
b1b2.setAttribute('fill', 'none'); 
b1b2.setAttribute('stroke', 'red'); 
b1b2.setAttribute('stroke-width', '5'); 

// 关键步骤：把创建好的path添加到页面上的SVG容器里
// 假设你页面里有个<svg id="mySvg" width="200" height="200"></svg>
document.getElementById('mySvg').appendChild(b1b2);

另外，完全不需要用jQuery，原生JS就能完美解决这个问题。只要记住：所有SVG元素（包括svg本身、path、circle、rect这些）都得用createElementNS创建，指定那个固定的SVG命名空间就行。

内容的提问来源于stack exchange，提问作者Ruben Kostandyan