如何使用按钮单击来增加/减少Html5 SVG Circle的大小？

Question

以下代码将增加/减少按钮click上的文本大小。

<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> 

我该如何实现它？

Answer 1

您必须更改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' 
    } 
} 

实时演示：https://plnkr.co/edit/PkWCHdDAIW1UkZvBsZka?p=preview