javascript - z-index layering in raphael.js -


i'm using raphael draw different shapes in different layers. i'd implement css z-index layering no matter function executed first(draw_rect, draw_circle or draw_line), rectangle stays @ bottommost layer, line, in middle , circle @ topmost layer. here's i've tried:

draw_rect(10, 10, 180, 180);  draw_circle(100, 100, 60); draw_line(); function draw_rect(x, y, width, height) {   var rect = paper.rect(x, y, width, height);   rect.attr({     fill: 'red',     position: 'absolute',     'z-index': 1   }); } function draw_circle(x, y, radius) {   var circ = paper.circle(x, y, radius);   circ.attr({     fill: 'green',     position: 'absolute',     'z-index': 3   }); } function draw_line() {   var line = paper.path("m0,0l200,200");   line.attr({     'stroke': 'blue',     position: 'absolute',     'z-index': 2   }); } 

i can't use element.tofront() & element.toback() since expressions bring elements top/bottom layers (not middle layer). so, if enlighten me on doing z-index layering, i'd thankful eternity :d

afaik can't z-index, unless separate them separate svg containers maybe (eg overlaying papers), svg spec uses ordering decide position.

also there no z-index 'attribute', style, need set via css (ie on svg container).

otherwise have via dom ordering. can possibly use el.insertbefore()/after() position them correct place, may need include bit of logic. eg place each 1 in set , check them go, or use selectall statement see if previous ones have been drawn, can add them before/after.


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -