如何在 Angular 中使用 SVG 图形-JavaScript中文网-JavaScript教程资源分享门户

SVG（Scalable Vector Graphics）是一种基于 XML 的标准矢量图形格式，它可以在任何分辨率下缩放而不失真。在前端开发中，SVG 图形被广泛应用于图标、图表、动画等方面。本文将介绍如何在 Angular 中使用 SVG 图形。

1. 在 Angular 中使用 SVG

Angular 中可以使用 SVG 作为组件的模板，也可以将 SVG 图形作为独立的组件使用。下面分别介绍这两种用法。

1.1 使用 SVG 作为组件模板

在 Angular 中，可以将 SVG 代码直接作为组件的模板使用。首先创建一个组件，例如 MySvgComponent，然后在组件的模板中添加 SVG 代码。例如，以下代码实现了一个简单的 SVG 图形：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#f00"></circle>
</svg>

将上述代码复制到 MySvgComponent 的模板中即可。完整的组件代码如下：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-svg',
  template: `
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="#f00"></circle>
    </svg>
  `
})
export class MySvgComponent {}

在其他组件中使用 MySvgComponent 即可显示该 SVG 图形。

1.2 将 SVG 图形作为独立的组件使用

除了将 SVG 代码直接作为组件模板使用外，还可以将 SVG 图形作为独立的组件使用。这样，可以在多个组件中重复使用该 SVG 图形。以下是实现方法：

创建一个新的组件，例如 MyIconComponent。
在 MyIconComponent 的模板中添加 SVG 代码。
在 MyIconComponent 的 TypeScript 文件中添加 @Input() 属性，用于接收外部传入的颜色等参数。
在其他组件中使用 MyIconComponent，并通过 @Input() 传入颜色等参数。

例如，以下代码实现了一个名为 MyIconComponent 的组件，它可以接收外部传入的颜色参数，并在 SVG 图形中应用该颜色：

// javascriptcn.com 代码示例
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-icon',
  template: `
    <svg width="24" height="24">
      <path [attr.fill]="color" d="M12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm-1.5 15.5l-3.5-3.5 1.5-1.5 2 2 5.5-5.5 1.5 1.5-7.5 7.5z"></path>
    </svg>
  `
})
export class MyIconComponent {
  @Input() color: string = '#000';
}

在其他组件中使用 MyIconComponent，并通过 @Input() 传入颜色参数即可。例如，以下代码在 AppComponent 中使用了 MyIconComponent，并将颜色设置为红色：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-my-icon [color]="'#f00'"></app-my-icon>
  `
})
export class AppComponent {}

2. 使用 SVG 实现动画效果

除了作为静态图形使用外，SVG 还可以用于实现动画效果。以下是一个简单的 SVG 动画示例：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#f00">
    <animate attributeName="x" from="10" to="50" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

该 SVG 图形包含一个矩形，它会在 1 秒钟内从 x=10 移动到 x=50，然后再从 x=50 移动回 x=10，不断循环。

在 Angular 中，可以通过 ngAfterViewInit() 方法获取 SVG 元素，并动态设置其属性值。例如，以下代码实现了与上述 SVG 动画相同的效果：

// javascriptcn.com 代码示例
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <svg #svg width="100" height="100">
      <rect x="10" y="10" width="80" height="80" fill="#f00"></rect>
    </svg>
  `
})
export class AppComponent {
  @ViewChild('svg') svg!: ElementRef;

  ngAfterViewInit() {
    const rect = this.svg.nativeElement.querySelector('rect');
    rect.setAttribute('x', '10');

    const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
    animate.setAttribute('attributeName', 'x');
    animate.setAttribute('from', '10');
    animate.setAttribute('to', '50');
    animate.setAttribute('dur', '1s');
    animate.setAttribute('repeatCount', 'indefinite');
    rect.appendChild(animate);
  }
}

在 ngAfterViewInit() 方法中，首先获取 SVG 元素和矩形元素，然后动态创建并添加 animate 元素，最后启动动画。

3. 总结

本文介绍了在 Angular 中使用 SVG 图形的两种方法：将 SVG 代码直接作为组件模板使用和将 SVG 图形作为独立的组件使用。此外，本文还介绍了如何使用 SVG 实现动画效果。通过本文的学习，读者可以掌握在 Angular 中使用 SVG 的基本技巧，为自己的前端开发工作提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ce92ed2f5e1655d54f303