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 --------------------~--> Great things are happening at Yahoo! Groups. See the new email design. http://us.click.yahoo.com/lOt0.A/hOaOAA/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/
