SVG focusable属性不起作用

Question

我使用focusable属性强制SVG元素在HTML文档中获得焦点.

我需要通过TAB键在SVG标签中导航SVG元素.如文件中所述(http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr)

但我不能这样做.我已将focusable属性设置为true,并将tabindex每个元素设置为0.

这是我的代码:

<div style="border: solid yellow 2px;" tabindex="0">
<svg tabindex="0" width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;" focusable="true"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" tabindex="0" stroke="green" fill="white" stroke-width="5" data-tabindex="0" style="border: solid green 1px;" focusable="true">
        <circle tabindex="0" cx="20" cy="25" r="5" focusable="true" data-Name="shape 1"  data-tabindex="0" />
        <circle tabindex="0" cx="40" cy="25" r="5" focusable="true" data-Name="shape 2"  data-tabindex="0" />
        <circle tabindex="0" cx="60" cy="25" r="5" focusable="true" data-Name="shape 3" data-tabindex="0" />
        <circle tabindex="0" cx="80" cy="25" r="5" focusable="true" data-Name="shape 4" data-tabindex="0" />
    </g>
</svg>

我在Google Chrome中测试了代码.有没有达到目的的方法？

Answer 1

正如@Robert Longson在评论中提到的,SVG 1.2从未最终确定,SVG 1.2 Tiny未被Web浏览器实现.SVG 2将具有一个tabIndex属性,其目的与HTML相同,但仍有一些细节需要解决,许多浏览器还没有实现它(Chrome,IE和Firefox都尊重tabIndexHTML页面中的SVG元素).

然而,与此同时,大多数浏览器将允许<a>SVG中的链接元素获得键盘焦点(如果它们具有xlink:href属性(即使它是非操作链接#).您无法控制Tab键顺序或从脚本控制焦点,但您可以允许用户循环浏览元素,并且链接将接收用户输入事件.

当包含圈子的链接获得用户焦点时,以下代码段会更改圈子的样式.

svg {
  max-height: 100vh;
  max-width: 100vw;
  }

a:focus {
  fill: blue;
  fill-opacity: 0.5;
  outline: none;
}

<svg width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" stroke="green" fill="white" stroke-width="5" data-tabindex="0" >
      <a xlink:href="#">
        <circle cx="20" cy="25" r="5" data-Name="shape 1"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="40" cy="25" r="5" data-Name="shape 2"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
      </a>
    </g>
</svg>