Apply z-index to SVG path

Question

Is there any way to apply z-index in SVG path?

I have a simple SVG arrow:

<svg class="arrow"> <path class="line" /> <path class="endpoint"/> </svg> 

If I use css for chnge z-index for everything .arrow , everything works fine, but when I try to apply it only on .endpoint , it doesn't work.

Is there any solution or workaround for this?

Thank you very much.

Answer 1

Alternatively, you can use "<use>"

Example:

 <svg> <circle id="shape1" cx="20" cy="50" r="40" fill="yellow" /> <rect id="shape2" x="4" y="20" width="200" height="50" fill="grey" /> <circle id="shape3" cx="70" cy="70" r="50" fill="blue" /> <use id="use" xlink:href="#shape2" /> </svg> 

The shape2 level will be the topmost layer.

Answer 2

There is no z index in SVG; it uses a painters model . You will need to remove the path from the DOM and re-add it before any elements that should be above it, and after any elements that should be on top.

As you discovered, z-index only works with the full contents of <svg> , since html rendering controls how it is positioned before passing to the SVG renderer to draw the internal contents of the SVG.

Answer 3

If you really need to do this, you can define an explicit layout order using alternative filter effects (if you don't need support in Firefox or IE).