reactjs - react 与 SVG : HTML inside foreignobject not rendered

Question

我通过 foreignobject 将 HTML 嵌入到 SVG 中:

var SvgWithForeignObject = React.createClass({
  render: function() {
    return(
      <svg>
        <foreignobject><div>Hello From SVG</div></foreignobject>
      </svg>
    )
  }
});

ReactDOM.render( < SvgWithForeignObject / > ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

“Hello From SVG”字符串未呈现。但是，我可以在 Chrome 或 FF 中进行较小的空白编辑，然后它就会变得可见:

(注意:屏幕录制来 self 通过 Scala.js 使用 React 的示例，但行为与普通 React 完全相同)

Answer 1

SVG 区分大小写，您要使用的元素称为 foreignObject。注意大写的 O。

此外，您还必须在此元素上设置 width 和 height 属性。

最后，不要忘记在根 HTML 元素上设置 xmlns="http://www.w3.org/1999/xhtml"。

var SvgWithForeignObject = React.createClass({
  render: function() {
    return(
      <svg>
        <foreignObject width="400" height="400"><div xmlns="http://www.w3.org/1999/xhtml">Hello From SVG</div></foreignObject>
      </svg>
    )
  }
});

ReactDOM.render( < SvgWithForeignObject / > ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>