SVG 的 tabIndex 在 IE 和 React 中不起作用答案

【问题标题】：SVG's tabIndex is not working in IE and ReactSVG 的 tabIndex 在 IE 和 React 中不起作用
【发布时间】：2019-10-29 10:32:45
【问题描述】：

使用 react 组件时，svg 文本元素的 tabIndex 在 IE11 和 Edge 中不起作用。

我期望使用 React 组件为 svg 中的文本元素执行 keypress 事件。这似乎在 chrome 和 FF 中运行良好，但在 IE11 和 Edge 中却失败了。

由于某种原因，当在 react 的 jsx 中设置时，tabIndex 属性在 IE 中没有被处理，导致 svg 的文本没有焦点来进行按键操作。

<html>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {

    doSomething() {
        alert("Keypress captured");
    }

    render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                <text fill="#273039" fontSize="25" width="150" tabIndex="0" onKeyPress={this.doSomething}>
                    <tspan>Type something here!</tspan>
                </text>
            </svg>
        </div>
        );
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>
</html>

这是一个在 chrome 和 IE 中尝试的示例： https://jsfiddle.net/pabloherre/nou8rc4e

你们有什么解决方法吗？或者似乎是一个错误？

【问题讨论】：

tabindex 是 SVG 2 的一部分。IE11 仅支持 SVG 1.1

标签： html reactjs internet-explorer svg

【解决方案1】：

您可以在<text> 标签中添加focusable="true"。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
        class Greeting extends React.Component {

        doSomething() {
        alert("Keypress captured");
        }

        render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                    <text fill="#273039" fontSize="25" width="150" tabIndex="0" focusable="true" onKeyPress={this.doSomething}>
                        <tspan>Type something here!</tspan>
                    </text>
            </svg>
        </div>
        );
        }
        }
        ReactDOM.render(
        <Greeting />,
        document.getElementById('root')
        );
    </script>

【讨论】：