Могу ли я добавить угловой компонент в SVG

Question

Я пытаюсь создать карту топологии сети, используя d3 и svg.Под обложкой выглядит так:

Я пытаюсь сделать, когда пользователь нажимает на узел, я добавляю прямоугольник, который я хочуввести мой угловой компонент.

 const popRect = me.svg.select('.agent-popover');

        popRect
            .append('svg:rect')
            .attr('x', d.x)
            .attr('y', d.y)
            .attr('width', 200)
            .attr('height', 200);

        popRect
            .append('agent-popover');

Возможно ли это?Шоу, которые будут прикреплены в DOM Dev Tools, но не отображается на экране.

---

ОБНОВЛЕНИЕ:

Мне удалось заставить это работать, используя ViewContainerRef и настройкуМой компонент поднялся таким образом, а затем изменил координаты внешнего объекта, чтобы поместить его туда, куда ему нужно было перейти:

 <svg:g [zoomableOf]="network" class="zoom-container" >
        <svg:g class="links" ></svg:g>
        <svg:g class="nodes"></svg:g>
        <svg:g class="securities"></svg:g>
        <svg:g class="agent-popover">
            <svg:foreignObject x="100" y="100" height="200" width="200">
                <ng-template #dynamic></ng-template>
            </svg:foreignObject>
        </svg:g>
    </svg:g>

Теперь мне нужно выяснить, как удалить / скрыть компонент при его закрытии.