Open In App

How to use z-index in svg elements ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



    Last Updated : 14 Jul, 2020
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads