Я пытаюсь сделать набор эллипсов на основе 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]);
При поиске решения для анимации svg с угловым 2 я вошел в вашу старую тему. Я не знаю, удовлетворен ли кто-либо этим ответом, но все равно:
Когда вы связываетесь с этим синтаксисом:
cx="{{elem.cx}}" or [cx]="elem.cx"
вы выполняете привязку к свойствам
cx не является свойством, а атрибутом (что причина, по которой вы не можете анимировать cx через css на данный момент - svg 2 должен сделать это возможным)
Связывание атрибутов в Angular2 выполняется следующим образом:
[attr.cx]="elem.cx"
Это должно работать сейчас.