SVG tabindex Attribute

Last Updated : 03 Nov, 2020

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:

My Personal Notes

Related Articles

HTML

HTML