为什么文本节点中的foreignObject不可见？

Question

我在文本节点中有文本和foreignObject。我看到了文字（＆＃34; blabla＆＃34;），但没有看到foreignObject内容（＆＃34; Hello＆＃34;）。

我该如何调试？

＆＃13;

＆＃13;

<svg>
  <text class="circle-label" style="display: inline;" transform="translate(100,20)">blabla
    <foreignObject width="200" height="100" fill="red">
      <div>Hello</div>
    </foreignObject>
  </text>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

SVG 1.1规范允许<text>元素中的以下元素类型：

  

内容模型：

     

以下任何数量的元素，任何顺序：
  animation elements
  descriptive elements
  text content child elements
  ‘a’

由于<foreignObject>在规范方面未分类，因此它不属于任何类别，因此不得嵌套在<text>元素中。

根据规范，只有container elements可能包含<foreignObject>元素。此类别包含以下元素类型：<a>，<defs>，<g>，<marker>，<mask>，<missing-glyph>，<pattern>， <svg>，<switch>和<symbol>。