ボタンクリックでHtml5 SVGサークルのサイズを増減するにはどうすればよいですか？

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