Question

我正在尝试在AngularJS 2应用程序中渲染一组基于SVG的椭圆。 ```

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正常工作，我能够使用硬编码属性渲染单个椭圆，并且还使用一组带有有效值的省略号填充数组，但后者在app.html中根本不显示。 / p>

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]);

Answer 1

在搜索角度为2的svg动画的解决方案时，我进入了你的老话题。我不知道是否有人对这个答案感到满意，但无论如何嘿：

使用以下语法绑定时：

cx="{{elem.cx}}" or [cx]="elem.cx"

你做属性绑定

cx不是属性，而是属性（这就是为什么你现在不能通过css动画cx的原因 - svg 2应该使这成为可能）

Angular2中的

属性绑定以这种方式完成：

[attr.cx]="elem.cx"

现在应该可以了。

AngularJS 2和SVG <ellipse>元素未呈现

1 个答案: