El atributo tabindex permite controlar si un elemento es enfocable o no. También define el orden relativo en el que se enfocan los elementos. Todos los elementos SVG se pueden utilizar con este atributo.
Sintaxis:
tabindex="integer"
Valores de atributos:
- entero: es un número entero que determina el orden relativo de la navegación de enfoque.
Los siguientes ejemplos demuestran el atributo tabindex:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
