ReactJS：在 SVG 容器中渲染 SVG 标签在 Safari 中失败答案

【问题标题】：ReactJS: Rendering SVG tags within SVG container fails in SafariReactJS：在 SVG 容器中渲染 SVG 标签在 Safari 中失败
【发布时间】：2015-12-10 07:36:24
【问题描述】：

在标记中，

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

在 JavaScript 中：

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

React 可以在所有浏览器的 HTML 元素容器中很好地呈现 SVG 元素
但是，在 Safari 中，React 不会在 SVG 元素容器中呈现 SVG。虽然它在 Firefox 和 Chrome 中运行良好。
可能是 Safari 不支持 SVG DOM 节点上的某些 API 来追加元素？

【问题讨论】：

标签： svg safari reactjs

【解决方案1】：

React 在挂载组件时使用innerHTML 属性。 innerHTML 属性在许多浏览器默认情况下不适用于 SVG 元素。

我使用了这个 polyfill https://code.google.com/p/innersvg/，它在 SVG 元素上添加了 innerHTML 属性。它解决了这个问题。

【讨论】：