SVG foreignObject内部符号不显示在Chrome中

Question

我想在SVG元素中使用符号显示HTML元素。

我目前的尝试使用foreignObject来呈现HTML内容，但在使用Chrome时，它在页面的DOM中缺失。

我有以下代码:

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<symbol id="hello-symbol">
<rect x="0" y="0" width="10" height="10"/>
<!-- foreignObject here -->
<foreignObject x="0" y="0" height="100" width="200">
<div xmlns="http://www.w3.org/1999/xhtml">Hello from SVG</div>
</foreignObject>
</symbol>
<use href="#hello-symbol"></use>
</svg>

在Firefox中，代码按预期工作。

在Chrome中，整个foreignObject节点从DOM中省略:

<use href="#hello-symbol">
#shadow-root
<svg id="hello-symbol">
<rect x="0" y="0" width="10" height="10"></rect>
<!-- foreignObject here -->
</svg>
</use>

我如何得到这个HTML内容显示在Chrome?

Answer 1

虽然<foreignObject>s可能在<symbol>s中被允许，但它们不在<use>的阴影树中。因此，在构建<use>的阴影树时，它们会被过滤掉。

阅读此处了解更多原因。