angular - SVG foreignObject 未显示在 Angular 模板内

Question

我在 Angular9 组件模板中使用内联 SVG。我想在这个 SVG 中显示一个 HTML 元素。当我尝试在其中使用 SVG foreignObject 时，它不会显示。

<p>Inline SVG with foreignobject inside angular component:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
  <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
  <foreignobject  x="10" y="10" width="100px" height="50px" >
    <xhtml:div xmlns="http://www.w3.org/1999/xhtml" style="background-color: aqua;">
      foreign object
    </xhtml:div> 
  </foreignobject> 
</svg>

当我在其他地方使用相同的 SVG 代码时，它正在工作。例如，当我直接在 index.html 中插入以下代码(不是在 angular 组件中)时，它会正确显示:

<p>SVG with foreignobject in index.html (not in angular component):</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
  <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
  <foreignobject  x="10" y="10" width="100px" height="50px" >
    <div xmlns="http://www.w3.org/1999/xhtml" style="background-color: aqua;">
      foreign object
    </div> 
  </svg:foreignobject> 
</svg>

我遗漏了什么，或者它是 Angular 内部的错误？请参见此处的示例: https://stackblitz.com/edit/angular-frdbxq

Answer 1

如果是 Angular 模板，你应该注意区分大小写的标签方式:

<foreignobject 
        ||
        \/
<foreignObject 

Forked Stackblitz