z-index control and relative coordinates: separated at birth?
mawrya <[email protected]> Wed, 6 Jan 2010 19:14:07 -0800 (PST)
| Newsgroups | gmane.comp.mozilla.devel.svg |
|---|---|
| Organization | http://groups.google.com |
| Message-ID | <ed8c1403-dce7-4195-a910-36373aa0475c@d20g2000yqh.googlegroups.com> |
I'm working on an app where I have multiple SVG graphics, each
composed of groups of paths, circles, etc. Each of these groups also
has a popup graphic that is can be shown/hidden by clicking on the
group. Something like this:
<g transform="translate(x,y)">
<rect .../>
<path.../>
<g id="popup1" style="display:none;" onclick="toggleDisplayMe
("popup1")">
<path.../>
<path.../>
</g>
</g>
The trouble is, the popup can sometimes overlap a nearby graphic
group. If the markup for this nearby group succeeds that of the popup,
the painters model demands that the part of the popup that intersects
this group is covered. This isn't good because popup type objects
usually should be at the highest layer, the highest z-index.
Of course, the solution is to move the markup for all the popups to
the end of the svg markup so the painter's model is in harmony with
the desired affect. Unfortunately, this means I can't use relative
coordinates for drawing the popups. Relative coordinates were really
simplifying things and I'm not looking forward to reworking everything
- I'm not just drawing pictures, but a Human-Machine-Interface
framework with interactive widget-type graphics that can be created,
moved around, and have multilple instances of the same widget on the
screen. Everything can be dynamic and drawn at various coordinates
based on input from external sources. This is why relative coordinates
are so handy in my case.
It seems that SVG doesn't let you have it both ways - you can either
have relative coordinates, or you can have control of layers / z-
index, not both at once. So, finally, the question: has anyone had
experience with easily transforming graphics from relative to absolute
coordinates, when those graphics are embedded in one or more svg
groups, each of which may have transforms applied to them? I am, of
course, able to use javascript or XSLT to manipulate the SVG DOM. Or
the long-shot: there isn't some backdoor hack in mozilla to enable z-
index in SVG is there? I only need this to work in Firefox.
Thanks for taking the time to read all this.