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/
