Skip to content

10. SVG를 템플릿으로 사용하기

Angular 애플리케이션에서는 SVG 파일을 템플릿으로 활용할 수 있다. SVG 파일을 템플릿으로 사용하면 SVG 엘리먼트 안에서도 HTML 템플릿과 마찬가지로 디렉티브를 사용하거나 바인딩 문법을 활용할 수 있다. 그래서 그래픽을 동적으로 구성할 때 활용할 수 있다.


Note


1. SVG 문법 예제

SVG를 템플릿으로 사용한다면 컴포넌트 클래스 코드를 이렇게 작성할 수 있다.


src/app/svg.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-svg",
  templateUrl: "./svg.component.svg",
  styleUrls: ["./svg.component.css"],
})
export class SvgComponent {
  fillColor = "rgb(255, 0, 0)";

  changeColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    this.fillColor = `rgb(${r}, ${g}, ${b})`;
  }
}


이 클래스 코드와 프로퍼티와 이벤트를 바인딩하려면 svg.component.svg 파일을 이렇게 구성하면 된다:


src/app/svg.component.svg
<svg>
  <g>
    <rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
    <text x="120" y="50">click the rectangle to change the fill color</text>
  </g>
</svg>


이 코드에서 click() 부분에는 이벤트 바인딩 문법이 사용되었고, [attr.fill]="fillColor" 부분에는 프로퍼티 바인딩 문법이 사용되었다.

References