Hi, well you already found out that the order in the DOM tree isn't hard coded at all. But there is more than just appendChild()
There is also .insertBefore(), .removeChild() and .replaceChild(). See a small tutorial at http://www.carto.net/papers/svg/ manipulating_svg_with_dom_ecmascript/index.shtml There is also a good reason for not having z-index in SVG. The DOM tree already provides a z-order and since DOM allows to reorder, create, delete, replace elements you can do everything you want. Besides it would be expensive to maintain a large list (thousands) of potentially contradicting z-Indexes in parallel to the existing DOM tree. Often, people coming from HTML complain about the missing z-Index without realising that it doesn't make any sense in the vector graphics/SVG world. I have a few remarks for your js/SVG code as well: * evt.clientX wouldn't work with viewBoxes and after zooming in. You should use SVGLocatable.getScreenCTM( ) for calculating the coordinates. * you seem to use css classes and the style attributes in your SVG elements. I don't recommend the use of "style". Either use CSS classes or presentation attributes directly. Style attributes are harder to process by script and don't offer the advantage of CSS classes. I don't know why style exists at all, it has no advantage over CSS classes and presentation attributes. If you want to write content that also works in SVG mobile, presentation attributes are the way to go, for browsers you can use CSS classes and presentation attributes. Well its not "evil", but I don't see a point using the style attribute. Hope this helps. Of course its just my personal view. Andreas --- In [email protected], Z T Minhas <[EMAIL PROTECTED]> wrote: > > hi, > > I am new, but familiar to the world of SVG and one of the things that of course is lacking is the z-index. i had been scouring the net for a solution. i finally found a solution in the SVG Wiki site at http://wiki.svg.org/Rendering_Order. There they have to the problem that dogged me. Since the layering of the svg objects is based on the location of the actual SVG code inside the file, it would be essentially treated as predefined, and hard coded. However the solution they provided is the following: > > > svgNode.parent.appendChild( svgNode ); > > Please note, I used a variant of this code: > > evt.target.parentNode.appendChild(evt.target); > > Here is my sample code of dragging objects with the mouse across > the canvas. It includes changing the layering, as well as using > mouse events to note the location of elements and drag them > with the motion of the mouse: > > <?xml version="1.0" encoding="UTF-8" standalone="no"?> > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd";> > <!-- Created by Keith Packard --> > <svg > xmlns="http://www.w3.org/2000/svg"; > xmlns:xlink="http://www.w3.org/1999/xlink"; > version="1.0" > x="0" > y="0" > width="240" > height="240" > id="glider"> > <script> > var offset = 0 > var pressed = false; > var zIndex = 0; > function change_it(evt) > { > evt.target.setAttribute('class','mouseover'); > } > function change_back(evt) > { > evt.target.setAttribute('class','mouseout'); > } > function mouse_move(evt) > { > var originalX=evt.target.getAttribute('x')*30 + 10; > offsetX = evt.clientX - originalX; > var originalY=evt.target.getAttribute('y')*30 + 10; > offsetY = evt.clientY - originalY; > > if(pressed) > { > var finalX = (originalX+offsetX -10)/30 > var finalY = (originalY+offsetY -10)/30 > > evt.target.setAttribute('x',finalX) > evt.target.setAttribute('y',finalY) > return; > } > return; > } > function mouse_down(evt) > { > evt.target.parentNode.appendChild(evt.target); > pressed=true; > } > function mouse_up(evt) > { > pressed=false; > } > > </script> > <style type="text/css"> > use.mouseover > { > fill:#ff0000 !important; > } > use.mouseout > { > fill:#ffcccc !important; > } > </style> > <defs> > <circle id="C1" r=".7"/> > <text id="message">ddddd</text> > </defs> > <g transform="translate(10,10)"> > <g id="scale" transform="scale(30,30)"> > <g id="grid" style="fill:none;stroke-linejoin:round;stroke- linecap:butt;stroke:#000000;stroke-width:.1;" > > <!-- outside --> > <path d="m 0 0 L 6 0 L 6 6 L 0 6 Z" /> > <!-- inside --> > <path d="M 0 2 L 6 2" /> > <path d="M 0 4 L 6 4" /> > <path d="M 2 0 L 2 6" /> > <path d="M 4 0 L 4 6" /> > </g> > <g id="dots"> > <use xlink:href="#C1" x="1" y="1" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="3" y="1" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="5" y="1" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="1" y="3" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="3" y="3" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="5" y="3" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="1" y="5" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="3" y="5" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <use xlink:href="#C1" x="5" y="5" onmouseover="change_it(evt);" class="mouseout" onmouseout="change_back(evt)" onmousemove="mouse_move(evt)" onmousedown="mouse_down(evt)" onmouseup="mouse_up(evt)"/> > <g id="cityText" font-size="3" font-family="Arial,Helvetica"> > <use xlink:href="#message" x="1" y="7" /> > </g> > </g> > </g> > </g> > </svg> > > Hope you find this helpful and interesting > > Regards > > Z T > > > > --------------------------------- > 8:00? 8:25? 8:40? Find a flick in no time > with theYahoo! Search movie showtime shortcut. > > [Non-text portions of this message have been removed] > ------------------------ Yahoo! Groups Sponsor --------------------~--> Check out the new improvements in Yahoo! Groups email. http://us.click.yahoo.com/4It09A/fOaOAA/yQLSAA/1U_rlB/TM --------------------------------------------------------------------~-> ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
