填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

SVG 作為範本

SVG as templates

你可以在 Angular 應用程式中將 SVG 檔案用作範本。當你使用 SVG 作為範本時,就可以像 HTML 範本一樣使用指令和繫結。使用這些功能,你可以動態產生互動式圖形。

You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics.

包含本章程式碼片段的工作實例參閱現場演練 / 下載範例

See the現場演練 / 下載範例for a working example containing the code snippets in this guide.

SVG 語法示例

SVG syntax example

以下示例顯示了將 SVG 用作範本的語法。

The following example shows the syntax for using an SVG as a template.

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 檔案中:

To see property and event binding in action, add the following code to your svg.component.svg file:

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")。

The example given uses a click() event binding and the property binding syntax ([attr.fill]="fillColor").