Skip to content
Related Articles

Related Articles

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 arrow_drop_up
Recommended Articles
Page :