React&SVG:外部对象中的HTML未呈现

Question

我通过foreignobject以下方式在HTML中嵌入HTML :

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中进行小的空格编辑,然后它变得可见:

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

Answer 1

SVG区分大小写,并且调用要使用的元素foreignObject.注意上部套管O.

此外,您必须在此元素上设置width和height属性.

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

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>