In SVG z-index is achieved by the order in which objects are created
bstuycke wrote: > Well in fact there is a scenario in which it makes sense to have a z- > index: > My company has build an svg application that visualizes telecom > networks. Typically the drawings consists of sites containing > equipment. Equipments are connected with each other. Sites are > often represented by a circle. Equipments have more complex symbols. > > When dragging a site, you want all the equipment in that side to move > together with the site. Most obvious way to implement this is to > make the equipment svg elements child elements of the site svg > element. Changing the coordinates of the site element is sufficient. > > Trouble in this case are the connections between equipment. Ideally > the connections should terminate under the equipment but be above the > site. E.g. z-index site: 0; connections: 1; sites:2. For elements > with same z-index, the DOM order would be taken. > > Of course this is not possible, which is a pity. > For the moment I simply avoid filling sites-circles because it would > hide connections between equipments. The connection line is only > under the border of the circle, which is ok, but not nice. > > Alternative is to have sites and equipment as siblings and to write > code that moves the equipment elements when its site element is > moved. Obviously a much more complicated solution. > > Bart > --- In [email protected], "Andreas Neumann" > <[EMAIL PROTECTED]> wrote: > >> 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 <ztminhas@> >> 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] >>> >>> > > > > > > ----- > 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 > > > > > ------------------------ Yahoo! Groups Sponsor --------------------~--> Something is new at Yahoo! Groups. Check out the enhanced email design. http://us.click.yahoo.com/kOt0.A/gOaOAA/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/
