SVG foreignObject 内部符号未在 Chrome 中显示答案

【问题标题】：SVG foreignObject inside symbol not showing in ChromeSVG foreignObject 内部符号未在 Chrome 中显示
【发布时间】：2021-06-08 17:13:27
【问题描述】：

我想使用符号在 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 中？

【问题讨论】：

你真的没有。我认为 Firefox 也可能在某些时候不允许这样做。
建议在SVG元素外使用绝对定位的浮动DIV
@RobertLongson 那个罗伯特的原因是什么？根据当前的 SVG2 草案，在符号中仍然允许使用 foreignObject。

标签： html google-chrome svg

【解决方案1】：

尽管<foreignObject>s 可能允许在<symbol>s 中使用，但它们不在来自<use> 的阴影树中。所以在构建<use> 的影子树时它们会被过滤掉。

Read here for more info on why.

【讨论】：