SVG 作为模板

你可以在 Angular 应用程序中将 SVG 文件用作模板。当你使用 SVG 作为模板时，就可以像 HTML 模板一样使用指令和绑定。使用这些功能，你可以动态生成交互式图形。

我们提供的服务有：成都网站设计、成都网站建设、外贸网站建设、微信公众号开发、网站优化、网站认证、惠阳ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的惠阳网站制作公司

包含本章代码片段的工作实例参阅现场演练 / 下载范例。

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

要想查看属性和事件绑定的实际效果，请把以下代码添加到你的 ​svg.component.svg​ 文件中：

这个例子使用了事件绑定语法 ​click()​ 和属性绑定语法（​[attr.fill]="fillColor"​）。

文章题目：创新互联Angular教程：AngularSVG作为模板
链接URL：https://chengdu.cdxwcx.cn/article/djjdpsj.html