Rendering SVG in Angular

Question

I am trying to render some SVG text using Angular (2+).

In the debugger I see the text node in the svg tree but the text is not visible on screen.

I created a plunkr to demonstrate the issue: http://plnkr.co/edit/QCc39AiDzxSeQMGiDqQC?p=preview

app:

import {Component} from 'angular2/core';
import {SvgTextComponent} from 'src/svgtext.component.ts';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <svg style="border: solid 1px dimgray; width: 100%; height: 600px;">
         <g svg-text></g>
      </svg>
    </div>
  `,
  directives: [SvgTextComponent]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

svgtext:

import {Component} from "angular2/core";

@Component({
    selector: 'g[svg-text]',
    template:'<text x="150" y="100">Hello world from Ng2!</text>',
})

export class SvgTextComponent { }

When I look in the DOM tree, the text-node is there... only not displaying. If I simply copy-past the text-node directly in the template of the App component then the text shows...

How can I fix this?

Thanks!

Answer 1

You need to include the svg namespace in the template:

<svg:text x="150" y="100">Hello world from Ng2!</svg:text>

instead of:

'<text x="150" y="100">Hello world from Ng2!</text>'