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>'

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

在Angular中渲染SVG

2 个答案: