SVG has many excellent qualities, and some that are douchey.
The lack of support for a CSS-style z-index is one of those.
The windy discussions on this topic by various W3C pezzonovantes has been going on since at least 2009.
What is the status today?
It appears that “stacking context” (the term of art for this used by the pezzonovantes) — which would have enabled z-index functionality — has been abandonned by the browser vendors.
I do not know why, though I am sure there are sound technical reasons: meaning, either they don’t want to spend the resources to implement, or there is a basic lack of agreement as to the degree to which CSS styling will be allowed to invade SVG’s turf.
The absence of an SVG z-index is tedious.
Basically you have to shuck and jive the painter’s model that SVG employs, as described succintly here.
XVG allows an end user to rend at the click of a button parameterized, pre-defined SVG shapes. These are used as scaffolding when designing a pattern.
For exampe, a designer may wish to position 4 circles atop the XVG baseline circle. In XVG terms, these would be top, bottom, left and right, with their perimeters meeting at the origin of the baseline circle.
This type of scaffolding is commonly used when designing, say, Islamic geometric patterns by hand.
Unfortunately, what happens with SVG is that if you layer, say, a rectangle on top of shapes that you’ve already worked with, those lines and markers remain visible (if the fill on your rect is transparent) but are now blocked by your rectangle. You can no longer mouse focus them, and your design process is now sleeping with the fishes.
My solution to this is to render a variety of helper shapes on load, but hide them.
I will also make available some knobs that will allow the end user to make these visible (or not), as desired.
I want this as simple as possible, and do not wish to have to keep track of which scaffolding shapes are visible or not at any given moment – just let CSS and the end user do the work of turning the lights on and off.
This workaround is somewhat clunky, as I would prefer to be able to spawn a modal box that allows the end user to move shapes up and down a stack of layers (representing the order of rendering of the various canonical shapes that are being used as scaffolding), as you can do, for exampe, with GIMP’s dockable Layers dialog box.
Alas the pezzonovantes have yet to greenlight z-index functionality. so I’m forced to do without.