SVG tabindex Attribute

Last Updated : 31 Mar, 2022

The tabindex attribute allows one to control whether an element is focusable or not. It also defines the relative order in which the elements are focused. All SVG elements can be used with this attribute.

Syntax:

tabindex="integer"

Attribute Values:

integer: It is an integer that determines the relative order of the focus navigation.

The below examples demonstrate the tabindex attribute:

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <h3>SVG tabindex attribute</h3>
    
    <svg viewBox="0 0 500 500" 
        xmlns="http://www.w3.org/2000/svg">
        
        <circle cx="60" cy="20" r="20" 
            tabindex="1" fill="green" />

        <circle cx="120" cy="30" r="30" 
            tabindex="2" fill="green" />

        <circle cx="60" cy="100" r="50" 
            tabindex="3" fill="green" />
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <h3>SVG tabindex attribute</h3>
    
    <svg viewBox="0 0 500 500" 
        xmlns="http://www.w3.org/2000/svg">
        
        <rect x="20" y="20" width="30" 
            height="30" tabindex="3" 
            fill="green" />

        <rect x="80" y="20" width="30" 
            height="50" tabindex="2" 
            fill="green" />
        
        <rect x="140" y="20" width="30" 
            height="30" tabindex="1" 
            fill="green" />
    </svg>
</body>

</html>

Output:

SVG tableValues Attribute

taran910

Improve

Article Tags :

SVG tabindex Attribute

Similar Reads

SVG Elements

SVG Properties

SVG Attributes

Thank You!

What kind of Experience do you want to share?