raphaeljs画 svg 图层级问题

使用raphaeljs 画 svg 图形时，后画的图像会在先画的图像上面，如下图：

var oWrap = document.getElementById("test");
var oPaper = new Raphael(oWrap ,"100%","100%");                    //画布

// 规则的矩形
var oRect = oPaper.rect(10, 10, 50, 50);
oRect .attr({ "fill" : "red" });

// 带圆角的矩形
var oCircle = oPaper.rect(40, 40, 50, 50, 10);
oCircle.attr({ "fill" : "blue" })

有时需要调节图形的层级，在raphaeljs文档中并没有找到像css 中z-index一样可以调节层级的属性或方法，不过发现一个方法，

在一定层度上可以解决此问题：

toFront() : 将元素向上移动。

调用方式：Element.toFront() ；

// 规则的矩形
var oWrap = document.getElementById("test");
var oPaper = new Raphael( oWrap  ,"100%","100%");                    //画布
var oRect = oPaper.rect(10, 10, 50, 50);
oRect .attr({"stroke":"#A51337","fill":"red"})




// 带圆角的矩形
var oCircle = oPaper.rect(40, 40, 50, 50, 10);
oCircle.attr({"stroke":"#A51337","fill":"blue"})


a.toFront();//注意调用需在圆形绘制之后