SVG をテンプレートとして使用

AngularアプリケーションでSVGファイルをテンプレートとして使用できます。 SVGをテンプレートとして使用する場合、HTMLテンプレートと同様にディレクティブとバインディングを使用できます。これらの機能を使用して、動的にインタラクティブなグラフィックを生成します。

SVG 構文例

次の例は、SVGをテンプレートとして使用するための構文を示しています。

src/app/svg.component.ts

      import {Component} from '@angular/core';@Component({  standalone: true,  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" を使用しています。