tabindex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年1月⁩.

tabindex 属性を使用すると、要素にフォーカスを合わせることができるかどうかを制御し、連続したフォーカスナビゲーションのために要素の相対的な順序を定義することができます。

この属性は、任意の SVG 要素で使用することができます。

例

html,
body,
svg {
  height: 100%;
}

html

<?xml version="1.0"?>
<svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
  <circle r="10" tabindex="0" fill="green" cx="60" cy="60" />
  <circle r="40" tabindex="0" fill="red" cx="60" cy="160" />
  <circle r="60" tabindex="0" fill="blue" cx="160" cy="60" />
  <circle r="20" tabindex="0" fill="black" cx="160" cy="160" />
</svg>