svg的使用之创建子标签

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!

上一篇:forge下载页面显示高度很窄解决办法


下一篇:使用JS去设置placeholder的样式,你会吗?