Элементы AngularJS 2 и SVG <ellipse> не отображаются

Я пытаюсь сделать набор эллипсов на основе SVG в приложении AngularJS 2. """

Step 1: perform the set-up steps for https://github.com/mgechev/angular2-seed
Step 2: modify app.html (see below)
Step 3: modify app.ts   (see below) 

"Шаг 1 работает правильно, и я могу отображать один эллипс с жестко закодированными атрибутами, а также заполнять массив набором эллипсов с допустимыми значениями, но последний вообще не отображается в приложении. HTML.

Содержание app.html:

  <nav>
    <a router-link="home">Home</a>
    <a router-link="about">About</a>
  </nav>

  <router-outlet></router-outlet>

  <svg>
   <!-- this ellipse is rendered correctly: --> 
   <ellipse cx="100" cy="100" rx="50" ry="30" fill="#f00" />

   <!-- nothing rendered here: --> 
   <ellipse *ng-for="#elem of elems"
    cx="{{elem.cx}}" cy={{elem.cy}}" 
    rx="{{elem.rx}}" ry={{elem.ry}}" 
    fill="{{elem.fill}}" />
  </svg>
</section>

Содержание app.ts:

/// <reference path="../typings/tsd.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';

import {Home} from './components/home/home';
import {About} from './components/about/about';

@Component({
  selector: 'app'
})
@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/about', component: About, as: 'about' }
])
@View({
  templateUrl: './app.html?v=<%= VERSION %>',
  directives: [RouterOutlet, RouterLink]
})
class App {
   constructor() {
     // this is for the SVG content
     this.elems = this.getGraphics();
   }

   getGraphics() {
     var majorAxis=40, minorAxis=80, maxCount=200, elems=[];
     var colors = ["#f00", "#0f0", "#00f"];

     var basePointX  = 250, basePointY = 250;
     var currentX    = 0, currentY     = 0;
     var offsetX     = 0, offsetY      = 0;
     var radius      = 0, spiralCount  = 4;
     var Constant    = 0.25, angle     = 0;
     var deltaAngle  = 1, maxAngle     = 721;


     var offsetX=0, offsetY=0, index=0;
     var majorAxis=40, minorAxis=60, elems=[], color="";
     var colors=["#FF0000","#0000FF","#FF00FF","#FF0000"];

     for(angle=0; angle<maxAngle; angle+=deltaAngle) {
       radius   = Constant*angle;
       offsetX  = radius*Math.cos(angle*Math.PI/180);
       offsetY  = radius*Math.sin(angle*Math.PI/180);
       currentX = basePointX+offsetX;
       currentY = basePointY-offsetY;

       // iterate through array of colors
       index = Math.floor(angle/deltaAngle);

       // append an (x,y) pair of values that
       // represent the upper-left vertex
       elems.push({cx:currentX,  cy:currentY,
                   rx:majorAxis, ry:minorAxis,
                   fill:colors[index%2]});
     }

     return elems;
   }
}

bootstrap(App, [routerInjectables]);