Fatal编程技术网
  • svg/
  • ReactJS:在Safari中在SVG容器中呈现SVG标记失败

ReactJS:在Safari中在SVG容器中呈现SVG标记失败

svg safari reactjs

ReactJS:在Safari中在SVG容器中呈现SVG标记失败,svg,safari,reactjs,Svg,Safari,Reactjs,在标记中 <html> <svg> <g>Test</g> <g id="existing-g"></g> <svg> </html> 试验 在JavaScript中： React.render(<text>Something</text>, document.getElementById('existing-g'));

在标记中

<html>
    <svg>
        <g>Test</g>
        <g id="existing-g"></g>
    <svg>
</html>


试验
在JavaScript中：

React.render(<text>Something</text>, document.getElementById('existing-g'));

React.render（Something，document.getElementById（'existing-g'）；
  • React在所有浏览器的HTML元素容器中很好地呈现SVG元素
  • 但是，在Safari中，React不会在SVG元素容器中呈现SVG。尽管它在Firefox和Chrome中运行良好
  • 可能是Safari不支持SVG DOM节点上的某些API来附加元素
React在安装组件时使用
innerHTML
属性<默认情况下，在许多浏览器中，SVG元素上的code>innerHTML属性不可用

我使用了这个polyfill，它在SVG元素上添加了
innerHTML
属性。它解决了这个问题