angular - SVGforeignObject未显示在 Angular 模板内

Question

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

<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