反应与SVG:foreignobject内的HTML未呈现 [英] React & SVG: HTML inside foreignobject not rendered

问题描述

我正在通过foreignobject将HTML嵌入SVG:

I am embedding HTML inside SVG via foreignobject:

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>

未呈现来自SVG的问候"字符串.但是，我可以在Chrome或FF中进行较小的空格编辑，然后该可见:

The "Hello From SVG" string is not rendered. However, I can make a minor whitespace edit in Chrome or FF and then it becomes visible:

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

(Note: The screen recording is from an example where I use React via Scala.js, but the behavior is exactly the same with plain React)

推荐答案

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

SVG is case sensitive and the element you want to use is called foreignObject. Note the upper cased O.

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

Also, you must set a width and height attribute on this element.

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

Finally, don't forget to set xmlns="http://www.w3.org/1999/xhtml" on your root HTML element.

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>

这篇关于反应与SVG:foreignobject内的HTML未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！