Rendering SVG v Angular2 - svg, uhlový

Snažím sa vykresliť nejaký text SVG pomocou funkcie Uhlová 2.

V ladiacom nástroji vidím textový uzol vo stromovom paneli, ale text nie je viditeľný na obrazovke.

Vytvoril som plunkra, ktorý demonštroval problém: http://plnkr.co/edit/QCc39AiDzxSeQMGiDqQC?p=preview

aplikácie:

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

Keď sa pozerám do stromu DOM, textový uzol je tam ... len sa nezobrazuje. Ak jednoducho skopírujem textový uzol priamo do šablóny komponentu aplikácie, text sa zobrazí ...

Ako to môžem vyriešiť?

Vďaka!

odpovede:

6 pre odpoveď č. 1

Owkay, našiel som to:

Musíte zahrnúť svg namespace do šablóny:

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

namiesto

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

---

0 pre odpoveď č. 2

Šablóna musí byť zabalená <svg>...</svg>, Neviem podrobnosti prečo.

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

export class SvgTextComponent { }

Mohlo by to súvisieť s touto otázkou https://github.com/angular/angular/issues/7216

---