ReactJS：在 SVG 容器内渲染 SVG 标签在 Safari 中失败
ReactJS: Rendering SVG tags within SVG container fails in Safari
在标记中，
<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 上的某些 API DOM 添加元素的节点？[=20=]
React 在挂载组件时使用 innerHTML 属性。 innerHTML 在许多浏览器中默认情况下，SVG 元素上的属性不可用。
我使用了这个 polyfill https://code.google.com/p/innersvg/，它在 SVG 元素上添加了 innerHTML 属性。它解决了问题。
在标记中，
<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 上的某些 API DOM 添加元素的节点？[=20=]
React 在挂载组件时使用 innerHTML 属性。 innerHTML 在许多浏览器中默认情况下，SVG 元素上的属性不可用。
我使用了这个 polyfill https://code.google.com/p/innersvg/，它在 SVG 元素上添加了 innerHTML 属性。它解决了问题。