SVG 作为模板link

SVG as templateslink

你可以在 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.

SVG 语法示例link

SVG syntax examplelink

以下示例显示了将 SVG 用作模板的语法。

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

      
        content_copy
      
      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:

      
        content_copy
      
      <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").