How to use z-index in svg elements ?

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.
Manually change the order of the element in the SVG document:Example:<svg xmlns="http://www.w3.org/2000/svg"         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:<svg xmlns="http://www.w3.org/2000/svg"         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: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:<svg xmlns="http://www.w3.org/2000/svg"         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.<svg xmlns="http://www.w3.org/2000/svg"         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:My Personal Notes
arrow_drop_upSave
Manually change the order of the element in the SVG document:Example:<svg xmlns="http://www.w3.org/2000/svg"         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:<svg xmlns="http://www.w3.org/2000/svg"         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:
<svg xmlns="http://www.w3.org/2000/svg"         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:
<svg xmlns="http://www.w3.org/2000/svg"         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:
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:<svg xmlns="http://www.w3.org/2000/svg"         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.<svg xmlns="http://www.w3.org/2000/svg"         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:My Personal Notes
arrow_drop_upSave
Example:
<svg xmlns="http://www.w3.org/2000/svg"         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.
<svg xmlns="http://www.w3.org/2000/svg"         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:
HTML-Misc
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.