今天遇到一个问题,创建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