I use inline SVG in an Angular9 component template. I want to display a HTML element inside this SVG. When I try to use SVG foreignObject in it, it is not displayed.
<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>
When I use same SVG code elsewhere, it is working. For example, when I insert following code directly in index.html (not in angular component), it displays correctly:
<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>
I am missing something, or is it an bug inside Angular? See example here: https://stackblitz.com/edit/angular-frdbxq