SVG 的 tabIndex 在 IE 和 React 中不起作用
Posted
技术标签:
【中文标题】SVG 的 tabIndex 在 IE 和 React 中不起作用【英文标题】：SVG's tabIndex is not working in IE and 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" 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 【参考方案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" tabIndex="0" focusable="true" onKeyPress=this.doSomething>
<tspan>Type something here!</tspan>
</text>
</svg>
</div>
);
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>【讨论】：
以上是关于SVG 的 tabIndex 在 IE 和 React 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
中风 url 在 Edge 和 IE 11 SVG 中不起作用
带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度