Apply z-index to SVG path

Question

Is there a way how to apply z-index on a SVG path?

I have simple SVG arrow:

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

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

Is there some solution or workaround for this?

Thank you very much.

Answer 1

As an alternative, 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 layer will be the top most layer.

Answer 2

There's no z-index in SVG, it uses painters model. You'd have to remove the path from the DOM and re-add it before any elements that should be on top of it and after any elements that it should be on top of.

As you've discovered z-index only works on the complete <svg> content as the html renderer controls how that is positioned before handing off to the SVG renderer to draw the internal SVG contents.