SVG foreignObject 未显示在角度模板内答案

【问题标题】：SVG foreignObject not showing inside angular templateSVG foreignObject 未显示在角度模板内
【发布时间】：2020-03-16 10:00:48
【问题描述】：

我在 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

【问题讨论】：

如果你的mime类型是xhtml那么foreignobject不正确，应该是foreignObject。如果您的 mime 类型是 html，则 xthml:div 不正确，应该是 div。所以无论哪种方式都需要修复。
@RobertLongson 谢谢，这只是字符大小写...现在可以正常工作了。

标签： angular svg

【解决方案1】：

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

<foreignobject 
        ||
        \/
<foreignObject

Forked Stackblitz

【讨论】：