在Angular中渲染SVG

Question

我试图使用Angular(2+)渲染一些SVG文本.

在调试器中,我看到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树时,文本节点就在那里......只是没有显示.如果我只是直接在App组件的模板中复制文本节点,则文本显示...

我怎样才能解决这个问题？

谢谢!

Answer 1

您需要svg在模板中包含命名空间:

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

代替:

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