CODEWITHSUNDEEP
angular
anonym
anonym

Reputation: 4850

How do I increase/decrease the size of an Html5 SVG Circle using button click?

The following code would increase/decrease the size of the text on button 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>

Using similar logic, I want to achieve this with a circle where the radius r of circle increases/decreases on button click.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="yellow" />
</svg>

How do I achieve it?

Upvotes: 0

Views: 219

Answers (1)

slaesh
slaesh

Reputation: 16917

You have to change the r attribute like this: [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'
  }
}

live-demo: https://plnkr.co/edit/PkWCHdDAIW1UkZvBsZka?p=preview

Upvotes: 2

Related Questions