Thanks Doug, its an exhaustive answer. --- In [email protected], "Doug Schepers" <[EMAIL PROTECTED]> wrote: > > Hi, Nazar- > > Nazar wrote: > | > | Hello, > | I use DOM to add some of the elements to SVG. Currently I use > | element.setAttribute("x", _x); to position element absolutely. > | > | What I am interested in is > | how to position elements relative to its parent element ? > > There are 2 ways of doing this. > > 1) You can use a nested SVG element, like this: > > <svg version='1.1' xmlns='http://www.w3.org/2000/svg' > xmlns:xlink='http://www.w3.org/1999/xlink'> > <svg id='nestedSVG' x='50' y='100'> > <rect x='25' y='30' width='40' height='40' fill='blue'/> > <circle cx='50' cy='100' r='20' fill='orange'/> > </svg> > </svg> > > Now, when you reposition the "nestedSVG" element by changing its x and y, > the child elements will move with it. In the example above, the <rect> will > be positioned at x=50+25=75, y=100+30=130. The circle will be at > cx=50+50=100, cy=100+100=200. > > The disadvantage of this is that the <svg> element is relatively expensive > computationally, so using a lot of them can cause a problem. Also, this > will not work in SVG Tiny viewers. > > 2) You can position the parent using a transform, like this: > > <svg version='1.1' xmlns='http://www.w3.org/2000/svg' > xmlns:xlink='http://www.w3.org/1999/xlink'> > <g tranform='translate(50, 100'> > <rect x='25' y='30' width='40' height='40' fill='blue'/> > <circle cx='50' cy='100' r='20' fill='orange'/> > </g> > </svg> > > This is much the same as a nested <svg>, but it is less expensive (it > doesn't establish its own coordinate system, clipping area, etc.). The > disadvantage is that it's not as nice to get and set the transform, since > you have to parse out the text string (or use the matrix transform, but > still not pretty). > > Hope this helps. > > Regards- > Doug >
----- 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/ <*> 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/
