如何使用按钮单击来增加/减少Html5 SVG Circle的大小?
问题描述:
以下代码将增加/减少按钮click
上的文本大小。如何使用按钮单击来增加/减少Html5 SVG Circle的大小?
<div class="buttons">
<button (click)="fSize = fSize + 1">+</button>
<button (click)="fSize = fSize - 1">-</button>
</div>
<br>
<div [ngStyle] = "{'font-size': fSize}">
HEY THERE
</div>
使用类似的逻辑,我想用一个圆圈,其中的圆半径增大r
/按钮点击下降到实现这一目标。
<svg width="100" height="100">
<circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="yellow" />
</svg>
我该如何实现它?
答
您必须更改r
属性,如下所示:[attr.r]="radius"
。
@Component({
selector: 'my-app',
template: `
<div>
<h2 (click)="radius = radius + 10">Hello {{name}}</h2>
<svg width="100" height="100">
<circle cx="50" cy="50" [attr.r]="radius" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
`,
})
export class App {
name:string;
radius = 20;
constructor() {
this.name = 'Angular2'
}
}
工作就像一个魅力! – anonym