svg中的标签都是xml格式,因此可以直接把他们当做dom来进行操作。
在操作生成svg内部的新标签的时候,与普通dom的createElement又有一定的区别,
例:
创建一个矩形,创建文本,如果希望文本显示在矩形之上,那么后面创建的默认z-index会高于先创建的。
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
var txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
然后按照自己的需求,各种设置属性:
rect.setAttribute("id", 'a_1');
rect.setAttribute("width", 30);
rect.setAttribute("height", 10);
rect.setAttribute("x", x坐标);
rect.setAttribute("y", y坐标);
创建g标签的情况下,组标签中的其它子标签的坐标会相对于g标签而定,但是创建g标签在页面并未显示,还没找到原因,suck!