Rendering SVG in Angular2

Question

Ich versuche, einig SVG Text zu machen Angular mit 2.

Im Debugger ich den Text-Knoten im svg Baum sehen, aber der Text ist nicht auf dem Bildschirm sichtbar.

habe ich eine plunkr das Problem zu demonstrieren: 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 { } 

Als ich in der DOM-Struktur aussehen, wird der Text-Knoten da ... nur nicht angezeigt. Wenn ich einfach kopieren-Vergangenheit der Text-Knoten direkt in der Vorlage der App-Komponente dann wird der Text zeigt ...

Wie kann ich dieses Problem beheben?

Danke!

Answer 1

Owkay, fand ich es:

Sie müssen die svg-Namespace in der Vorlage enthalten:

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

statt

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

Answer 2

Die Vorlage muss mit <svg>...</svg> gewickelt werden. Ich weiß nicht, warum.

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

export class SvgTextComponent { } 

könnte zu diesem Thema https://github.com/angular/angular/issues/7216

bezogen werden