Javascript SVG不在IE中渲染，但在chrome上运行良好

我有一个使用react切换的react应用程序。我试图在应用程序中设置内部HTML。它在IE上运行良好，在IE上不呈现任何内容

代码段：

      componentDidMount() {
// Change text hardcoded in plugin
const ontext = document.getElementsByClassName('react-toggle-track-check');
for (let idx = 0; idx < ontext.length; idx++) {
  ontext[idx].innerHTML = '<svg width="50" height="11" viewBox="0 0 50 11"><text x="20" y="9" style="font-size: 10; fill:#FFFFFF">ON</text><text x="38" y="9" style="font-family: FontAwesome;font-size: 12px;  fill:#FFFFFF;"">&#xf023;</text></svg>';
}
const offtext = document.getElementsByClassName('react-toggle-track-x');
for (let idx = 0; idx < offtext.length; idx++) {
  offtext[idx].style.width = '15px';
  offtext[idx].innerHTML = '<svg width="50" height="11" viewBox="0 0 50 11"><text x="0" y="9" style="font-size: 10; fill:#FFFFFF">OFF</text><text x="23" y="9" style="font-family: FontAwesome;font-size: 12px;  fill:#FFFFFF;">&#xf023;</text></svg>';
  }
}

componentDidMount（）{
//更改插件中硬编码的文本
const-ontext=document.getElementsByClassName（'react-toggle-track-check'）；
for（设idx=0；idxontext[idx].innerHTML='ONtry adding
xmlns='http://www.w3.org/2000/svg“version=“1.0”
到svg标记…另外，在其中一个标记的末尾有一个打字错误
fill:#FFFFFF；”“
…两个x"？你能解释一下输入错误吗？我没有得到@Jaroman的那部分，innerHTML文本，带有svg元素，在IE中工作-虽然你可能需要将；字符更改为默认字体，但要将单位添加到
字体大小
值并设置背景色。但它看起来与屏幕截图完全不同。在我看来，这是一个错误建议使用字体可怕的问题，而不是SVG。尝试创建一个可复制的最小测试用例。重复输入：
style=“Font-family:FontAwesome；Font-size:12px；fill:#ffffffff；”“
这不是很明显吗？结尾处的
”
应该是
“
这意味着什么？”，它在IE上工作正常，在IE上不会呈现任何内容。”