反应＆amp; SVG：外部对象中的HTML未呈现

Question

我通过foreignobject

在SVG中嵌入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属性。

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

＆＃13;

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在尝试在 D3 图形中添加 foreignObject 元素时遇到了同样的问题。

您在foreignObject 元素上缺少width 和height 属性是正确的，但我也相信回答这个问题需要进一步了解命名空间。

这里是对命名空间的深入解释，以及它们如何与带有 foreignObject 元素的 SVG 元素相关联：

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

总结：

SVG 元素有一个命名空间。命名空间用于区分 xml 方言。 例如，SVG 和 XHTML（更严格、更基于 XML 的 HTML 版本）都有一个“title”元素。使用命名空间有助于解决这个问题。

使用 SVG 元素时，您位于 svg 命名空间内。 'xmlns' 属性定义了命名空间。在这种情况下，我们使用 svg XML 命名空间（在 URI 中提到）

<svg xmlns="http://www.w3.org/2000/svg">
    <! -- svg namespace -->
</svg> 

元素 foreignObject 允许您包含来自不同 XML 命名空间的元素。

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- svg namespace -->
    <foreignObject>
        <!-- Here you can add elements from a namespace other than the svg namespace -->
    </foreignObject>
</svg> 

现在在foreignObject 元素中，添加您拥有的非svg 元素以及它们所属的命名空间。

<svg xmlns="http://www.w3.org/2000/svg">
    <! -- svg namespace -->
    <foreignObject>
        <xhtml:div>Div element with the XHTML namespace</div>
    </foreignObject>
</svg> 

以及在 html 上使用 XHTML 命名空间的原因 - XHTML 是基于 XML 的 HTML 版本。 要使用 XML 命名空间，请使用 XHTML 命名空间。

有关 XML 命名空间的进一步阅读： https://www.w3.org/TR/REC-xml-names/#sec-namespaces