Angular SVG作為模板

SVG 作為模板

你可以在 Angular 應(yīng)用程序中將 SVG 文件用作模板。當(dāng)你使用 SVG 作為模板時(shí)，就可以像 HTML 模板一樣使用指令和綁定。使用這些功能，你可以動(dòng)態(tài)生成交互式圖形。

包含本章代碼片段的工作實(shí)例參閱現(xiàn)場(chǎng)演練 / 下載范例。

SVG 語法示例

以下示例展示了將 SVG 用作模板的語法。

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}, $)`;
  }
}

要想查看屬性和事件綁定的實(shí)際效果，請(qǐng)把以下代碼添加到你的 ?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>

這個(gè)例子使用了事件綁定語法 ?click()? 和屬性綁定語法（?[attr.fill]="fillColor"?）。