Indeed connections stretch and remain connected to the A and B equipment. That is covered by scripting.
The problem is not for connections between equipment in the same site, but for connections between equipment in different sites. E.g. see abstract dom tree below. <g ConnectionA1ToB1 From=A1 To=B1><line .../></g> <g SiteA> <circle/> <g equipmentA1>....</g> <g equipmentA2>....</g> </g> <g SiteB> <circle/> <g equipmentB1>....</g> <g equipmentB2>....</g> </g> There is no way to organise the Dom tree so that the line of ConnectionA1ToB1 is rendered above siteA <circle/> and SiteB <circle/> but below <g equipmentA1>....</g> and <g equipmentB1>....</g>. That is as long as the equipment groups are included in the site groups, which is done for dragging purposes. If a site is dragged, all the equipment are dragged automatically - fast & no additional scripting. You could say that the dom hierarchy is used to store a functional containment relationship between elements and not a strict graphical relationship. However you made me very curious on your suggestion to use event listeners. If it allows me to organise the dom tree as follows, it would solve my problem. When the coordinates of a site group change, the coordinates of the equipment in the site should follow also. <g SiteA> <circle/> </g> <g SiteB> <circle/> </g> <g ConnectionA1ToB1><line .../></g> <g equipmentA1>....</g> <g equipmentA2>....</g> <g equipmentB1>....</g> <g equipmentB2>....</g> Bart --- In [email protected], "domenico_strazzullo" <[EMAIL PROTECTED]> wrote: > > 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" > <bart.stuyckens@> 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 --------------------~--> 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/
