Skip to content
Related Articles

Related Articles

How to use z-index in svg elements ?
  • Last Updated : 14 Jul, 2020

The z-index only works on the complete content. This is because the HTML rendered controls the positioning before handing off to the SVG rendered to place the internal SVG contents. So, basically there is no z-index for SVG, it uses the painters model.

Painter’s model: According to this model, paint is applied in successive operations onto some area of the output device, covering up the paint from the earlier operations. This is because, after each object is painted, it becomes part of the background for the next painting operation. To summarize, according to this model, the order in which the element is painted or displayed is defined by the order in which the element appears in the document. So, to change the z-index of the element, it can be done in the following ways.

  1. Manually change the order of the element in the SVG document:
    Example:




            viewBox="10 30 220 420">
        <g>
            <g id="one">
                <circle fill="green" cx="100" 
                        cy="85" r="20" />
            </g>
      
            <g id="two">
                <circle fill="grey" cx="100" 
                        cy="115" r="20" />
            </g>
            <g id="three">
                <circle fill="green" cx="100" 
                        cy="145" r="20" />
            </g>
        </g>
    </svg>

    Output:



    Now, our aim is to increase the z-index of the “grey” element. As discussed, according to the painter’s model, for the element to have the highest z-index, it should be placed as the latest object to be drawn. So to increase the z-index of the “grey” circle, we will just change the position of the “grey” circle element to the last.

    Example:




            viewBox="10 30 220 420">
        <g>
            <g id="one">
                <circle fill="green" cx="100" 
                        cy="85" r="20" />
            </g>
      
            <g id="three">
                <circle fill="green" cx="100" 
                        cy="145" r="20" />
            </g>
            <g id="two">
                <circle fill="grey" cx="100" 
                        cy="115" r="20" />
            </g>
        </g>
    </svg>

    Output:

  2. Using use: The use element takes elements from the SVG document and duplicates them at the place where you place it. So, basically instead of changing the order of the element in the document, we are duplicating the element to keep up the uniformity.

    Example:




            viewBox="10 30 220 420">
        <g>
            <g id="one">
                <rect x="30" y="70" width="80" 
                    height="80" fill="green"></rect>
            </g>
            <g id="two">
                <rect x="60" y="110" width="80" 
                    height="80" fill="grey"></rect>
            </g>
            <g id="three">
                <rect x="90" y="150" width="80" 
                    height="80" fill="black"></rect>
            </g>
        </g>
      
    </svg>

    Output:

    To increase the z-index of the “green” element, we will use the use feature.




            viewBox="10 30 220 420">
        <g>
            <g id="one">
                <rect x="30" y="70" width="80" 
                    height="80" fill="green"></rect>
            </g>
            <g id="two">
                <rect x="60" y="110" width="80" 
                    height="80" fill="grey"></rect>
            </g>
            <g id="three">
                <rect x="90" y="150" width="80" 
                    height="80" fill="black"></rect>
            </g>
        </g>
        <use xlink:href="#one" />
    </svg>

    Output:

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :