SVG tabindex 属性

SVG（Scalable Vector Graphics 可伸缩矢量图形）是一种基于 XML 的矢量图形格式，通常用于 Web 上的图像呈现。tabindex 属性是 HTML 中常用的属性，用于定义 DOM 元素的 tab 键顺序和可聚焦性。在 SVG 中，也可以使用 tabindex 属性来管理文档中不同的 SVG 元素的 tab 键顺序。

tabindex 属性

tabindex 属性定义了元素的聚焦顺序。当用户禁用鼠标时，这可以方便地通过键盘浏览页面。该属性可以为任何 HTML 或 SVG 元素预定义键盘顺序。

语法：

<element tabindex="number">

其中，number 表示元素的排列顺序。该值必须是整数，0 表示该元素是可聚焦的，负值表示该元素是不可聚焦的。

例如，以下的 SVG 矩形元素可以通过 tabindex 属性改变其 tab 键顺序：

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <rect x="20" y="20" width="60" height="60" tabindex="2"/>
  <rect x="40" y="40" width="60" height="60" tabindex="1"/>
</svg>

其中，第一个矩形元素 tabindex 值为 2，第二个矩形元素 tabindex 值为 1。这表示在通过 tab 键浏览时，第二个矩形元素将首先获得焦点，而第一个矩形元素将在按下 tab 键后获得焦点。

总结

在 SVG 中使用 tabindex 属性可以帮助优化用户体验，特别是当用户禁用鼠标时使用键盘来浏览页面。注意，虽然 tabindex 属性可以让元素获得焦点，但这不一定意味着该元素是可操作的。为了获得良好的可访问性体验，SVG 元素应当与键盘输入交互，以及使用合适的 ARIA 属性。