SVGElement: tabIndex 属性

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有浏览器中可用。

SVGElement 接口的 tabIndex 属性表示当前 SVG 元素的标签顺序。

焦点顺序如下：

具有正数 tabIndex 的元素。tabIndex 值相同的元素应按其出现的顺序导航。导航从最低 tabIndex 到最高 tabIndex 进行。
不支持 tabIndex 属性或支持该属性但将其值赋为 0 的元素，按其出现的顺序导航。

禁用的元素不参与标签顺序。

值不需要是连续的，也不一定以某个特定值开头。它们甚至可以是负数，尽管每个浏览器都会裁剪非常大的值。

值

一个整数。

示例

设置 `tabIndex` 属性

html

<svg id="svg1" tabindex="2" xmlns="http://www.w3.org/2000/svg" role="img">
  <circle cx="50" cy="50" r="40" fill="blue"></circle>
</svg>
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" role="img">
  <rect width="100" height="100" fill="green"></rect>
</svg>

const svg1 = document.getElementById("svg1");
const svg2 = document.getElementById("svg2");

// Access and modify the tabIndex
console.log(svg1.tabIndex); // 2
svg2.tabIndex = 1; // Add svg2 to the tab order before svg1

// Programmatically focus on an element with negative tabIndex
svg1.tabIndex = -1;
svg1.focus(); // Works, even though it is not in the tabbing order