Angular: Specify xml namespace for component's selector (router-outlet inside <svg>root)

[Joel Rafalimanana]

Hi Everybody,

I have been looking but haven't found a solution to my problem.

I would like to have a <router-outlet> inside <svg>.

Something like that :

<svg xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<xhtml:router-outlet></router-outlet>
</svg>

The component's selector I am routing to looks something like that : 

@Component({

  selector: 'svg:g[app-layout-hexagonal-grid]'
}

That "svg:g" in the selector doesn't do the trick unfortunately :( 

If there is a way to specify the namespace for the component's selector, I haven't found what it is.

Anybody knows ?

Thanks.

J.

[Sander Elias]

Hi Joel,

I'm not sure this is even possible (or feasible) at the moment. I see you have opened an issue for it. I will ask around, and let you know.

Regards

Sander

[Sander Elias]

Hi Joel,

I answered your question on git also.

I don't think this is possible. The problem is that the SVG-tree is XML, and it doesn't support unknown elements. that means if you put the ngOutlet in there, the SVG tree will not render anymore.
If you put the XHTML modifier on the node, it will wrap that node inside a foreignObject. that means that whatever the router puts in there, will be in the HTML subspace, not in the SVG render tree.

The only solution that comes to mind, is to create your own router, using an SVG native element.
I really hope that I'm wrong here because the idea is intriguing, and if it works, it would enable some nice tricks. Charting pops to mind, but some generative art and other fun exercises become possible also!

For some more deeper information, by friend Tero wrote a nice article on SVG in angular

Regards

Sander