JS动态创建SVG元素不生效问题

今天遇到一个问题，创建SVG Path的时候，path的属性怎么都不生效，导致耗费很多时间。

虽然创建了DOM，但是特性不生效的代码如下：

const pathEl = document.createElement('path');

后来发现是没有弄清一个最基础的原理问题：

XML是有命名空间的。
HTML的节点不同于SVG的节点。

因此，创建SVG节点和创建HTML DOM是不一样的。

createElementNS

最后，采用以下方式实现：

const pathEl = document.createElmentNS("http://www.w3.org/2000/svg", 'path');

有效的命名空间的URI: