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> 