动态创建svg元素以及其子元素

1.遇见的问题：项目遇到拓扑图，是基于svg的，当拓扑图中的每一个设备点击选中时，需要弹出一个框，这个框已经封装好了，但是没有小三角，好吧，我自己来搞

2.我的实现：当我用document.createElement方法动态生成polygon节点后插入svg节点，并没有什么卵用。我审查元素时，看到节点确实已经生成了，但是就是不显示，而且一样的代码我复制一遍放到节点中，就有效果。对svg一脸陌生的我，出了蒙圈，还有，好奇。

3.原因查找：用document.createElement创建出来的节点是属于html dom，而svg的节点是svg dom。所以需要用createElementNS函数并传入节点名称的命名空间。

4.动态创建svg:

　　var svgDom = document.createElementNS('http://www.w3.org/2000/svg','svg');

　　svgDom.setAttribute('width','1000');

　　svgDom.setAttribute('height','1000');

　　document.body.appendChild(svgDom);

5.动态创建svg的形状元素，比如 创建一个三角形

　　var polygonDom = document.createElementNS('http://www.w3.org/2000/svg'，'polygon');

　　polygonDom.setAttribute('points','200,60 240 ,60 220,80');

　　polygonDom.setAttribute('style','fill:black;strock:#ccc;stroke-width:1;');

　　svgDom.appendChild(polygonDom);

6.总结：创建svg 节点要用createElementNS函数并且要传入节点名称的命名空间。