SVG无法在IE中呈现，但在chrome上工作正常

Question

我有一个使用react-toggle的反应应用程序。我试图在应用程序中设置内部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>';
  }
}

Screenshot on Chrome