How to use z-index in svg elements

Question

I m using the svg circles in my project like this    lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 160 120  gt       lt g gt           lt g id  one  gt               lt circle fill  green  cx  100  cy  105  r  20    gt           lt  g gt           lt g id  two  gt               lt circle fill  orange  cx  100  cy  95  r  20    gt           lt  g gt       lt  g gt   lt  svg gt    And I m using the z-index in the g tag to show the elements the first  In my project I need to use only z-index value  but I can t use the z-index to my svg elements  I have googled a lot but I didn t find anything relatively  So please help me to use z-index in my svg   Here is the DEMO

User · Answer

Move to front by transform TranslateZ Warning  Only works in FireFox  x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 160 160  style  width 160px  height 160px   gt       lt g style  transform-style  preserve-3d   gt           lt g id  one  style  transform-style  preserve-3d   gt               lt circle fill  green  cx  100  cy  105  r  20  style  transform TranslateZ 1px    gt  lt  circle gt           lt  g gt           lt g id  two  style  transform-style  preserve-3d   gt               lt circle fill  orange  cx  100  cy  95  r  20  gt  lt  circle gt           lt  g gt       lt  g gt   lt  svg gt  x000D   x000D   x000D

User · Answer

We have already 2019 and z-index is still not supported in SVG   You can see on the site SVG2 support in Mozilla that the state for z-index     Not implemented   You can also see on the site Bug 360148  Support the  z-index  property on SVG elements   Reported  12 years ago    But you have 3 possibilities in SVG to set it    With element appendChild aChild   With parentNode insertBefore newNode  referenceNode   With targetElement insertAdjacentElement positionStr  newElement    No support in IE for SVG    Interactive demo example  With all this 3 functions    x000D   x000D  var state   0  x000D      index   100  x000D   x000D  document onclick   function e  x000D    x000D      if e target getAttribute  class       clickable   x000D        x000D          var parent   e target parentNode  x000D   x000D          if state    0  x000D              parent appendChild e target   x000D          else if state    1  x000D              parent insertBefore e target  null     null - adds it on the end x000D          else if state    2  x000D              parent insertAdjacentElement  beforeend   e target   x000D          else x000D              e target style zIndex   index    x000D        x000D     x000D   x000D  if  document querySelector  svg   insertAdjacentElement  x000D    x000D      var label   document querySelectorAll  label   2   x000D      label setAttribute  disabled   disabled    x000D      label style color     aaa   x000D      label style background     eee   x000D      label style cursor    not-allowed   x000D      label title    This function is not supported in SVG for your browser    x000D    x000D  label background  cef padding 5px cursor pointer  x000D   clickable cursor pointer  x000D  With   x000D   lt label gt  lt input type  radio  name  check  onclick  state 0  checked  gt appendChild   lt  label gt  x000D   lt label gt  lt input type  radio  name  check  onclick  state 1   gt insertBefore   lt  label gt  lt br gt  lt br gt  x000D   lt label gt  lt input type  radio  name  check  onclick  state 2   gt insertAdjacentElement   lt  label gt  x000D   lt label gt  lt input type  radio  name  check  onclick  state 3   gt Try it with z-index lt  label gt  x000D   lt br gt  x000D   lt svg width  150  height  150  viewBox  0 0 150 150  gt  x000D       lt g stroke  none  gt  x000D           lt rect id  i1  class  clickable  x  10  y  10  width  50  height  50  fill   80f   gt  x000D           lt rect id  i2  class  clickable  x  40  y  40  width  50  height  50  fill   8f0   gt  x000D           lt rect id  i3  class  clickable  x  70  y  70  width  50  height  50  fill   08f   gt  x000D       lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

The clean  fast  and easy solutions posted as of the date of this answer are unsatisfactory   They are constructed over the flawed statement that SVG documents lack z order   Libraries are not necessary either   One line of code can perform most operations to manipulate the z order of objects or groups of objects that might be required in the development of an app that moves 2D objects around in an x-y-z space   Z Order Definitely Exists in SVG Document Fragments  What is called an SVG document fragment is a tree of elements derived from the base node type SVGElement   The root node of an SVG document fragment is an SVGSVGElement  which corresponds to an HTML5  lt svg gt  tag   The SVGGElement corresponds to the  lt g gt  tag and permits aggregating children   Having a z-index attribute on the SVGElement as in CSS would defeat the SVG rendering model   Sections 3 3 and 3 4 of W3C SVG Recommendation v1 1 2nd Edition state that SVG document fragments  trees of offspring from an SVGSVGElement  are rendered using what is called a depth first search of the tree   That scheme is a z order in every sense of the term   Z order is actually a computer vision shortcut to avoid the need for true 3D rendering with the complexities and computing demands of ray tracing   The linear equation for the implicit z-index of elements in an SVG document fragment   z-index   z-index of svg tag   depth first tree index   tree node qty   This is important because if you want to move a circle that was below a square to above it  you simply insert the square before the circle   This can be done easily in JavaScript   Supporting Methods  SVGElement instances have two methods that support simple and easy z order manipulation    parent removeChild child  parent insertBefore child  childRef    The Correct Answer That Doesn t Create a Mess  Because the SVGGElement   lt g gt  tag  can be removed and inserted just as easily as a SVGCircleElement or any other shape  image layers typical of Adobe products and other graphics tools can be implemented with ease using the SVGGElement   This JavaScript is essentially a Move Below command   parent insertBefore parent removeChild gRobot   gDoorway    If the layer of a robot drawn as children of SVGGElement gRobot was before the doorway drawn as children of SVGGElement gDoorway  the robot is now behind the doorway because the z order of the doorway is now one plus the z order of the robot     A Move Above command is almost as easy   parent insertBefore parent removeChild gRobot   gDoorway nextSibling      Just think a a and b b to remember this   insert after   move above insert before   move below   Leaving the DOM in a State Consistent With the View  The reason this answer is correct is because it is minimal and complete and  like the internals of Adobe products or other well designed graphics editors  leaves the internal representation in a state that is consistent with the view created by rendering   Alternative But Limited Approach  Another approach commonly used is to use CSS z-index in conjunction with multiple SVG document fragments  SVG tags  with mostly transparent backgrounds in all but the bottom one   Again  this defeats the elegance of the SVG rendering model  making it difficult to move objects up or down in the z order     NOTES     https   www w3 org TR SVG render html v 1 1  2nd Edition  16 August 2011       3 3 Rendering Order Elements in an SVG document fragment have an implicit drawing order  with the first elements in the SVG document   fragment getting  painted  first  Subsequent elements are painted on   top of previously painted elements       3 4 How groups are rendered Grouping elements such as the    g    element  see container elements  have the effect of producing a temporary   separate canvas initialized to transparent black onto which child   elements are painted  Upon the completion of the group  any filter   effects specified for the group are applied to create a modified   temporary canvas  The modified temporary canvas is composited into the   background  taking into account any group-level masking and opacity   settings on the group

User · Answer

its easy to do it    clone your items sort cloned items replace items by cloned    x000D   x000D  function rebuildElementsOrder  selector  orderAttr  sortFnCallback     x000D   let  items     selector   x000D   let  cloned    items clone    x000D    x000D    cloned sort sortFnCallback    null   sortFnCallback   function a b    x000D      let i0   a getAttribute orderAttr  parseInt a getAttribute orderAttr   0  x000D          i1   b getAttribute orderAttr  parseInt b getAttribute orderAttr   0  x000D      return i0  gt  i1 1 -1  x000D       x000D   x000D           items each function i  e   x000D              e replaceWith  cloned i    x000D      x000D    x000D   x000D     use order    click function     x000D      rebuildElementsOrder  use order     order    x000D   x000D         you can use z-index property for inline css declaration x000D         getComputedStyle always return  auto  in both Internal and External CSS decl  tested in chrome  x000D       x000D      rebuildElementsOrder   use order    null  function a  b    x000D          let i0   a style zIndex parseInt a style zIndex  0  x000D          i1   b style zIndex parseInt b style zIndex  0  x000D      return i0  gt  i1 1 -1  x000D          x000D         x000D      x000D  use order    x000D    cursor  pointer  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  id  keybContainer  viewBox  0 0 150 150  xml space  preserve  gt  x000D   lt defs gt  x000D       lt symbol id  sym-cr  preserveAspectRatio  xMidYMid meet  viewBox  0 0 60 60  gt  x000D           lt circle cx  30  cy  30  r  30    gt  x000D           lt text x  30  y  30  text-anchor  middle  font-size  0 45em  fill  white  gt  x000D               lt tspan dy  0 2em  gt Click to reorder lt  tspan gt  x000D           lt  text gt  x000D       lt  symbol gt  x000D   lt  defs gt  x000D       lt use order  1  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  0  y  0  width  60  height  60  style  fill   ff9700  z-index  1   gt  lt  use gt  x000D       lt use order  4  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  50  y  20  width  50  height  50  style  fill   0D47A1  z-index  4   gt  lt  use gt  x000D       lt use order  5  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  15  y  30  width  50  height  40  style  fill   9E9E9E  z-index  5   gt  lt  use gt  x000D       lt use order  3  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  25  y  30  width  80  height  80  style  fill   D1E163  z-index  3   gt  lt  use gt  x000D       lt use order  2  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  30  y  0  width  50  height  70  style  fill   00BCD4  z-index  2   gt  lt  use gt  x000D       lt use order  0  xmlns xlink  http   www w3 org 1999 xlink  xlink href   sym-cr  x  5  y  5  width  100  height  100  style  fill   E91E63  z-index  0   gt  lt  use gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

You can use use    lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 160 120  gt       lt g gt           lt g id  one  gt               lt circle fill  green  cx  100  cy  105  r  20    gt           lt  g gt           lt g id  two  gt               lt circle fill  orange  cx  100  cy  95  r  20    gt           lt  g gt       lt  g gt       lt use xlink href   one    gt   lt  svg gt    The green circle appears on top  jsFiddle

User · Answer

There is no z-index for svgs  But svg determines which of your elements are the uppermost by theire position in the DOM  Thus you can remove the Object and place it to the end of the svg making it the  last rendered  element  That one is then rendered  topmost  visually     Using jQuery   function moveUp thisObject       thisObject appendTo thisObject parents  svg gt g         usage   moveUp     myTopElement         Using D3 js   d3 selection prototype moveUp   function         return this each function             this parentNode appendChild this                usage   myTopElement moveUp

User · Answer

Push SVG element to last  so that its z-index will be in top  In SVG  there s no property called z-index  try below javascript to bring the element to top   var Target   document getElementById event currentTarget id   var svg   document getElementById  SVGEditor    svg insertBefore Target  svg lastChild nextSibling     Target  Is an element for which we need to bring it to top svg  Is the container of elements

User · Answer

Another solution would be to use divs  which do use zIndex to contain the SVG elements As here  https   stackoverflow com a 28904640 4552494

User · Answer

As others here have said  z-index is defined by the order the element appears in the DOM  If manually reordering your html isn t an option or would be difficult  you can use D3 to reorder SVG groups objects    Use D3 to Update DOM Order and Mimic Z-Index Functionality  Updating SVG Element Z-Index With D3  At the most basic level  and if you aren t using IDs for anything else   you can use element IDs as a stand-in for z-index and reorder with those  Beyond that you can pretty much let your imagination run wild    Examples in code snippet   x000D   x000D  var circles   d3 selectAll  circle   x000D  var label   d3 select  svg   append  text   x000D       attr  transform    translate      5 100         x000D   x000D  var zOrders     x000D      IDs  circles 0  map function cv   return cv id      x000D      xPos  circles 0  map function cv   return cv cx baseVal value      x000D      yPos  circles 0  map function cv   return cv cy baseVal value      x000D      radii  circles 0  map function cv   return cv r baseVal value      x000D      customOrder   3  4  1  2  5  x000D    x000D   x000D  var setOrderBy    IDs   x000D  var setOrder   d3 descending  x000D   x000D  label text setOrderBy   x000D  circles data zOrders setOrderBy   x000D  circles sort setOrder   x000D   lt script src  https   cdnjs cloudflare com ajax libs d3 3 4 11 d3 min js  gt  lt  script gt  x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 400 100  gt   x000D     lt circle id  1  fill  green  cx  50  cy  40  r  20   gt   x000D     lt circle id  2  fill  orange  cx  60  cy  50  r  18   gt  x000D     lt circle id  3  fill  red  cx  40  cy  55  r  10   gt   x000D     lt circle id  4  fill  blue  cx  70  cy  20  r  30   gt   x000D     lt circle id  5  fill  pink  cx  35  cy  20  r  15   gt   x000D   lt  svg gt  x000D   x000D   x000D    The basic idea is    Use D3 to select the SVG DOM elements   var circles   d3 selectAll  circle    Create some array of z-indices with a 1 1 relationship with your SVG elements  that you want to reorder   Z-index arrays used in the examples below are IDs  x  amp  y position  radii  etc      var zOrders         IDs  circles 0  map function cv   return cv id          xPos  circles 0  map function cv   return cv cx baseVal value          yPos  circles 0  map function cv   return cv cy baseVal value          radii  circles 0  map function cv   return cv r baseVal value          customOrder   3  4  1  2  5     Then  use D3 to bind your z-indices to that selection   circles data zOrders setOrderBy     Lastly  call D3 sort to reorder the elements in the DOM based on the data   circles sort setOrder        Examples     You can stack by ID        With leftmost SVG on top        Smallest radii on top        Or Specify an array to apply z-index for a specific ordering -- in my example code the array  3 4 1 2 5  moves reorders the 3rd circle  in the original HTML order  to be 1st in the DOM  4th to be 2nd  1st to be 3rd  and so on

User · Answer

Using D3   If you want to re-inserts each selected element  in order  as the last child of its parent    selection raise

User · Answer

Try to invert  one and  two  Have a look to this fiddle   http   jsfiddle net hu2pk 3   Update  In SVG  z-index is defined by the order the element appears in the document  You can have a look to this page too if you want   https   stackoverflow com a 482147 1932751

User · Answer

As discussed  svgs render in order and don t take z-index into account  for now   Maybe just send the specific element to the bottom of its parent so that it ll render last  function bringToTop targetElement        put the element at the bottom of its parent   let parent   targetElement parentNode    parent appendChild targetElement         then just pass through the element you wish to bring to the top bringToTop document getElementById  quot one quot      Worked for me  Update If you have a nested SVG  containing groups  you ll need to bring the item out of its parentNode  function bringToTopofSVG targetElement     let parent   targetElement ownerSVGElement    parent appendChild targetElement      A nice feature of SVG s is that each element contains it s location regardless of what group it s nested in   1

User · Answer

Using D3    If you want to add the element in the reverse order to the data use     insert  g     first-child     Instead of  append  Adding an element to top of a group element

User · Answer

Specification

In the SVG specification version 1.1 the rendering order is based on the document order:

first element -> "painted" first

Reference to the SVG 1.1. Specification

3.3 Rendering Order

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

Solution (cleaner-faster)

You should put the green circle as the latest object to be drawn. So swap the two elements.

_x000D_

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> _x000D_
   <!-- First draw the orange circle -->_x000D_
   <circle fill="orange" cx="100" cy="95" r="20"/> _x000D_
_x000D_
   <!-- Then draw the green circle over the current canvas -->_x000D_
   <circle fill="green" cx="100" cy="105" r="20"/> _x000D_
</svg>

_x000D_

Here the fork of your jsFiddle.

Solution (alternative)

The tag use with the attribute xlink:href and as value the id of the element. Keep in mind that might not be the best solution even if the result seems fine. Having a bit of time, here the link of the specification SVG 1.1 "use" Element.

Purpose:

To avoid requiring authors to modify the referenced document to add an ID to the root element.

_x000D_

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">_x000D_
    <!-- First draw the green circle -->_x000D_
    <circle id="one" fill="green" cx="100" cy="105" r="20" />_x000D_
    _x000D_
    <!-- Then draw the orange circle over the current canvas -->_x000D_
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />_x000D_
    _x000D_
    <!-- Finally draw again the green circle over the current canvas -->_x000D_
    <use xlink:href="#one"/>_x000D_
</svg>

_x000D_

Notes on SVG 2

SVG 2 Specification is the next major release and still supports the above features.

3.4. Rendering order

Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted.

Along the z axis, elements are grouped into stacking contexts.

3.4.1. Establishing a stacking context in SVG

...

Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, ...

[javascript] How to use z-index in svg elements?

The answer is

Interactive demo example

Use D3 to Update DOM Order and Mimic Z-Index Functionality

Examples

Update

Specification

Solution (cleaner-faster)

Solution (alternative)

Notes on SVG 2

Examples related to javascript

Examples related to jquery

Examples related to svg

Examples related to z-index

Tags