1

I am trying to render SVG graphics in run-time with no success. Only works if i put the SVG code inside the component's template.

I have tried it using the ComponentFactoryResolver and the ViewContainerRef's method createComponent. After that, the Renderer class (i'm trying to not use the nativeElement due the recommendations from Angular team), adding the namespace before the tagname: <svg:rect> and the selector property selector: ':svg:g[svg-box]'...

I am using Angular 2.0.0-rc.5. You can check it here https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

In both cases the generated HTML code is correct but it doesn't render anything.

Any ideas?

Thank you.

Alex
  • 29
  • 4

1 Answers1

0

Finally i got it!!

Using the Renderer class, when we create SVG elements we have to add the following before the element's tag: :svg:tag. In my case:

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

You can check it in this plunker's version 3: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

Now i'm trying to do the same using the ComponentFactoryResolver and the ViewContainerRef's method createComponent approach.

Alex
  • 29
  • 4