How to prevent SVG elements from gaining focus with tabs in IE11?

问题

There is an inline SVG element among my HTML form elements. When I navigate through my elements with the Tab key, the SVG element gets focused, in IE11 only, even if the SVG element has the tabindex="-1" attribute set to every element inside it:

<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>

To be sure that it's focusing on that element, I call document.activeElement in the console, and yes, it prints out the SVG thing.

Internet Explorer 11 should honor the negative value, as it does for other DOM elements, or should it not? What can I possibly do to prevent this?

回答1:

In case you missed it, the answer was commented:

tabindex is part of upcoming SVG2 and is not yet supported by IE11. Have a look at this question for a work-around.

The answer in that question recommends adding a focusable="false" attribute to the SVG element.

Thanks to @altocumulus

来源：https://stackoverflow.com/questions/29393144/how-to-prevent-svg-elements-from-gaining-focus-with-tabs-in-ie11