Geek Answers Handbook

SVG rendering in Angular

I am trying to render some SVG text using Angular (2+).

In the debugger, I see a text node in the SVG tree, but the text does not appear on the screen.

I created a plan to demonstrate the problem: http://plnkr.co/edit/QCc39AiDzxSeQMGiDqQC?p=preview

attachment:

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

When I look into the DOM tree, the text node is there ... just not displayed. If I just copy the text node directly in the App component template, the text will be shown ...

How can i fix this?

Thank!

+4
source share
2 answers

You need to include the namespace svgin the template:

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

instead:

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

<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

0

More articles:


All Articles