使用SVG模板注入动态组件

Question

是否可以注入作为子svg元素的动态组件？

例如，我有一个主要组件（CanvasComponent），其模板就是这样的

<svg width="400" height="400">
 <ng-template appCanvasAnchor></ng-template>
</svg>

ng-template是用于根据https://angular.io/guide/dynamic-component-loader

动态注入组件的锚点

动态（SquareComponent）有这个模板

<svg:rect width="100" height="100" style="fill:red" />

现在，由于动态组件添加到DOM的方式，当我的Square组件添加DOM时，它将被div元素包含，如下所示。

<svg width="400" height="400">
  <div app-square>
   <rect width="100" height="100" style="fill:red" />
 </div>
</svg>

理论上说一切都很好，除了这是SVG的事实，因此我的方块不会渲染，因为它有未知的标记（div）。这里的问题是，我可以以某种方式改变注入器使用的元素，以便不使用div，而是使用和svg知道像g这样的元素吗？