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:

  • HTML - 使用 http://www.w3.org/1999/xhtml
  • SVG - 使用 http://www.w3.org/2000/svg
  • XBL - 使用 http://www.mozilla.org/xbl
  • XUL - 使用 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

麻凯倩

微信:makaiqian