рендеринга SVG в Angular2

Question

Я пытаюсь сделать некоторые SVG текст, используя угловую 2.

В отладчике я вижу текстовый узел в дереве SVG, но текст не виден на экране.

Я создал plunkr продемонстрировать вопрос: http://plnkr.co/edit/QCc39AiDzxSeQMGiDqQC?p=preview

приложение:

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 { } 

Когда я смотрю в дерево DOM, текст-узел является там ... только не отображается. Если я просто скопирую текстовый узел непосредственно в шаблон компонента приложения, тогда текст показывает ...

Как это исправить?

Спасибо!

Answer 1

Owkay, я нашел его:

Вы должны включать пространство имен ГСВ в шаблоне:

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

вместо

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

Answer 2

Шаблон должен быть обернут <svg>...</svg>. Я не знаю подробностей, почему.

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

export class SvgTextComponent { } 

могут быть связаны с этим вопросом https://github.com/angular/angular/issues/7216