CODEWITHSUNDEEP
csssvgz-index
Aida_Aida
Aida_Aida

Reputation: 551

Apply z-index to SVG path

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.

Upvotes: 11

Views: 33910

Answers (3)

shibualexis
shibualexis

Reputation: 4744

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.

Upvotes: 15

Michael Mullany
Michael Mullany

Reputation: 31750

If you have a dire need to do it, you can define an explicit compositing order using alternate filter effects (as long as you don't need support in Firefox or IE.)

Upvotes: -1

Robert Longson
Robert Longson

Reputation: 124179

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.

Upvotes: 18

Related Questions