Ben svg ağacında metin düğümü görüyoruz ama metin ekranda görünür değil ayıklayıcıya olarak Açısal 2.</p> <p>kullanarak bazı SVG metin oluşturmak için çalışıyorum Angular2

Question

yılında Oluşturma SVG. http://plnkr.co/edit/QCc39AiDzxSeQMGiDqQC?p=preview

uygulaması:

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 ağacına bakın, metin düğümdür

Sorunu göstermek için bir plunkr yarattı orada ... sadece gösterilmiyor. Metin düğümünü doğrudan Uygulama bileşeninin şablonunda kopyalayıp kopyalıyorsam, metin şu şekildedir:

Bunu nasıl düzeltebilirim?

Teşekkürler!

Answer 1

Owkay, buldum:

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

yerine

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

Answer 2

şablon <svg>...</svg> ile sarılmış olması gerekir:

Sen şablonda svg ad eklemeniz gerekir. Neden olduğunu bilmiyorum.

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

export class SvgTextComponent { } 

bu sorunla ilgili Might be https://github.com/angular/angular/issues/7216