如何防止 SVG 元素通过 IE11 中的选项卡获得焦点？答案

【问题标题】：How to prevent SVG elements from gaining focus with tabs in IE11?如何防止 SVG 元素通过 IE11 中的选项卡获得焦点？
【发布时间】：2015-06-06 05:44:02
【问题描述】：

在我的 HTML 表单元素中有一个内联 SVG 元素。当我使用 Tab 键浏览我的元素时，SVG 元素会获得焦点，仅在 IE11 中，即使 SVG 元素将tabindex="-1" 属性设置为其中的每个元素：

<svg width="20px" height="20px" tabindex="-1">
    <g tabindex="-1">
      <circle cx="8.5" cy="8.5" r="7.75" stroke="#999" stroke-width="1" tabindex="-1" />
      […]
    </g>
</svg>

为了确保它专注于该元素，我在控制台中调用 document.activeElement，是的，它会打印出 SVG 内容。

Internet Explorer 11 应该像对待其他 DOM 元素一样尊重负值，还是不应该这样做？我可以做些什么来防止这种情况发生？

【问题讨论】：

tabindex是即将推出的 SVG2 的一部分，IE11 尚不支持。看看这个question 的解决方法。
啊！伟大的！问题解决了！

标签： internet-explorer svg internet-explorer-11 tabindex

【解决方案1】：

如果你错过了，答案被评论了：

tabindex 是即将推出的 SVG2 的一部分，IE11 尚不支持。查看this question 以了解解决方法。

该问题的答案建议为 SVG 元素添加 focusable="false" 属性。

感谢@altocumulus

【讨论】：

谢谢。更容易查看解决方案并找到已回答的问题。如果有人将此答案标记为已接受，那就太好了 - 它至少可以为我节省几分钟。
有趣的一点是，SVG 在默认情况下是可聚焦的，即使它位于交互元素（例如按钮）内。