如何使用按鈕單擊來增加/減少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