Angular2 rendert SVG in der Laufzeit nicht

Question

Ich versuche, SVG-Grafiken in der Laufzeit ohne Erfolg zu rendern. Funktioniert nur, wenn ich den SVG-Code in die Vorlage der Komponente einfüge.

Ich habe es versucht, mit dem ComponentFactoryResolver und der Methode des ViewContainerRef create. Danach wird die Renderer Klasse (Ich versuche nicht, die von Angular Team nativeElement aufgrund der Empfehlungen zu verwenden), Hinzufügen des Namespace vor dem Tag-Namen: <svg:rect> und die Auswahl Eigenschaft selector: ':svg:g[svg-box]' ...

Ich bin mit Angular 2.0.0-rc.5. Sie können es hier überprüfen https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

In beiden Fällen ist der generierte HTML-Code korrekt, aber es wird nichts gerendert.

Irgendwelche Ideen?

Vielen Dank.

Answer 1

Endlich habe ich es !!

Mit der Renderer Klasse, wenn wir SVG-Elemente erstellen, müssen wir vor dem Element-Tag Folgendes hinzufügen: :svg:tag. In meinem Fall:

this.SVGRenderer.createElement(this.parent.nativeElement, ":svg:rect"); 

können Sie es überprüfen in dieser Plunker Version 3: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

Jetzt versuche ich das gleiche mit dem ComponentFactoryResolver und die ViewContainerRef Methode create Ansatz zu tun.