AngularJS 2和SVG＆LT;椭圆＆GT;元素不会呈现 [英] AngularJS 2 and SVG <ellipse> elements not rendered
问题描述
我试图呈现一套基于SVG的椭圆在AngularJS 2应用程序。
```
第1步：执行设置步骤为https://github.com/mgechev/angular2-seed
步骤2：修改app.html（见下文）
步骤3：修改app.ts（见下文）
```
第1步工作正常，我能够呈现与硬codeD属性一个椭圆，也填充了一组与有效值椭圆的数组，但后者不是在所有的应用中展示。 HTML
app.html的内容：
＆LT;＆导航GT;
＆LT;路由器链路=家＆GT;家庭和LT; / A＆GT;
＆LT;路由器链接=关于＆gt;关于＆LT; / A＆GT;
＆LT; / NAV＆GT; ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT; ＆LT; SVG＆GT;
！＆LT; - 这是椭圆正确呈现： - ＆GT;
＆LT;椭圆CX =100CY =100RX =50RY =30补=＃F00/＆GT; ！＆LT; - 这里没有什么渲染： - ＆GT;
＆LT;椭圆* NG换=elems的＃ELEM
CX ={{elem.cx}}CY = {{elem.cy}}
RX ={{elem.rx}}RY = {{elem.ry}}
填写={{elem.fill}}/＆GT;
＆LT; / SVG＆GT;
＆LT; /节＆gt;
app.ts的内容：
///＆lt;参考路径=../分型/ tsd.d.ts/＆GT;
进口{组件，视图，引导，NgFor}从'angular2 / angular2';
进口{RouteConfig，RouterOutlet，RouterLink，routerInjectables}从'angular2 /路由器;从./components/home/home进口{HOME};
进口{}简介从./components/about/about';@零件（{
选择：应用程序
}）
@RouteConfig（[
{路径：'/'，分量：家庭，如：家}，
{路径：'/约'，分量：约，为：关于}
]）
@视图（{
templateUrl：./app.html?v=<%=版本％＆GT;，
指令：[RouterOutlet，RouterLink]
}）
类应用{
构造函数（）{
//这是对SVG内容
this.elems = this.getGraphics（）;
} 的getGraphics（）{
变种majorAxis = 40，minorAxis = 80，MAXCOUNT = 200，elems = [];
变种颜色= [＃F00，＃0f0，＃00F]; 变种basePointX = 250，basePointY = 250;
变种currentX = 0，currentY = 0;
变种offsetX = 0，offsetY = 0;
变种半径= 0，spiralCount = 4;
VAR常数= 0.25，角= 0;
变种deltaAngle = 1，maxAngle = 721;
变种offsetX = 0，offsetY = 0，索引= 0;
VAR majorAxis = 40，minorAxis = 60，elems = []，颜色=;
变种颜色= [＃FF0000，＃0000FF，＃FF00FF，＃FF0000]; 对于（角度= 0;角α; maxAngle;角+ = deltaAngle）{
半径=常数*角;
offsetX =半径* Math.cos（角度* Math.PI / 180）;
offsetY =半径* Math.sin（角度* Math.PI / 180）;
currentX = basePointX + offsetX;
currentY = basePointY，offsetY; //通过颜色遍历数组
指数= Math.floor（角/ deltaAngle）; //追加（X，Y）值对的
//重新present左上顶点
elems.push（{CX：currentX，CY：currentY，
RX：majorAxis，RY：minorAxis，
填写：颜色[索引％2]}）;
} 返回elems;
}
}引导程序（App [routerInjectables]）;
当搜寻与角2 SVG动画的解决方案，我进了你的老话题。
我不知道是否有人很高兴与这个答案，但嘿反正：
当您使用此语法绑定：
CX ={{elem.cx}}或[CX] =elem.cx
你的属性绑定
CX不是属性，但属性的（这就是为什么你不能现在通过CSS动画CX的原因 - SVG二要实现这一点虽然）的
属性绑定在Angular2做是这样的：
[attr.cx] =elem.cx
这应该现在的工作。
I'm trying to render a set of SVG-based ellipses in an AngularJS 2 application. ```
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)
``` Step #1 works correctly, and I'm able to render a single ellipse with hard-coded attributes, and also populate an array with a set of ellipses with valid values, but the latter is not displayed at all in app.html.
Contents of 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>
Contents of 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]);
While searching for a solution for svg animations with angular 2, I came into your old topic. I don't know if anyone is pleased with this answer, but hey anyway:
When you bind with this syntax:
cx="{{elem.cx}}" or [cx]="elem.cx"
you do property-binding
cx is not a property but an attribute (that's the reason why you cannot animate cx through css for now - svg 2 should make this possible though)
Attribute-binding in Angular2 is done this way:
[attr.cx]="elem.cx"
That should work now.
这篇关于AngularJS 2和SVG＆LT;椭圆＆GT;元素不会呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
