在 Angular 中渲染 SVG答案

【问题标题】：Rendering SVG in Angular在 Angular 中渲染 SVG
【发布时间】：2016-08-04 06:44:59
【问题描述】：

我正在尝试使用 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 组件的模板中复制粘贴文本节点，那么文本会显示...

我该如何解决这个问题？

谢谢！

【问题讨论】：

标签： svg angular

【解决方案1】：

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

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

代替：

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

【讨论】：

【解决方案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

【讨论】：