Nest directives that render SVG

Question

I've created a component that renders SVG, which works fine. However, I'd like to contain part of that SVG in a separate component. When I do this, however, the inner SVG doesn't get rendered - which I'm guessing (not knowing that much about SVG) is due to the component's tag not being a valid SVG element.

An example can be seen in this Plnkr. The text inside the inner-svg-example isn't displayed. However, when you edit the page in your developer tools and remove the inner-svg-example directive, it is shown.

Since Angular 2 deprecated the replace option on directives, what would be the best way to fix this?

Answer 1

Instead of using element selector

<inner-svg-example></inner-svg-example>

using it as an attribute selector on some valid svg tag like g solves it

<g inner-svg-example></g>

More over it is required to specify svg: in front of the svg element which is supposed to be added, in your case it is

<text>...</text>

to

<svg:text>...</svg:text>

Based on this blog post
With help from @John's answer on another similar question
Demo Plnkr

Your plnkr was using earlier versions of angular2, change log for support of svg