Hi Bart, If I understand well, i.e. the connections stretch and must be above the site's circle, you just need to group the whole site and make the circle its first child. But I'm not sure I understand "the connections should terminate under the equipment".
> 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. It's not complicated, they do need to be siblings. Just put the event listeners on the group (again, if I'm not missing something). Domenico --- In [email protected], "bstuycke" <[EMAIL PROTECTED]> 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" > <neumann@> 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] > > > > > > ------------------------ Yahoo! Groups Sponsor --------------------~--> Yahoo! Groups gets a make over. See the new email design. http://us.click.yahoo.com/hOt0.A/lOaOAA/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/
