SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它可以在任何尺寸下保持清晰度，并且可以被编辑和动画化。在前端开发中，SVG 被广泛应用于图标、图表、地图等场景中。Angular 是一个流行的前端框架，本文将介绍如何在 Angular 中使用 SVG。
1. 在 Angular 中引入 SVG
在 Angular 中使用 SVG 有两种方式：一种是直接将 SVG 文件引入到组件模板中，另一种是使用 SVG 图标库。下面我们将分别介绍这两种方式。
1.1 直接引入 SVG 文件
将 SVG 文件直接引入到组件模板中，可以使用 img 标签或 object 标签。使用 img 标签引入 SVG 文件时，需要将 src 属性设置为 SVG 文件路径，并设置 width 和 height 属性；使用 object 标签引入 SVG 文件时，需要设置 data 属性为 SVG 文件路径。
<!-- 使用 img 标签引入 SVG 文件 --> <img src="assets/icons/my-icon.svg" alt="My Icon" width="24" height="24"> <!-- 使用 object 标签引入 SVG 文件 --> <object type="image/svg+xml" data="assets/icons/my-icon.svg" width="24" height="24"></object>
1.2 使用 SVG 图标库
使用 SVG 图标库可以避免在每个组件中都引入 SVG 文件，同时也可以提高代码的可维护性。Angular Material 是一个流行的 UI 库，它提供了一套 SVG 图标库，可以通过安装 @angular/material 包来使用。
在组件模板中使用 Angular Material 的 SVG 图标库，需要先在组件类中引入 MatIconModule，然后在 imports 中添加 MatIconModule。
import { MatIconModule } from '@angular/material';
@NgModule({
imports: [MatIconModule],
...
})
export class MyModule { }然后就可以在组件模板中使用 mat-icon 标签引用 Angular Material 的 SVG 图标库中的图标了。
<!-- 引用 Angular Material 的 SVG 图标库 --> <mat-icon>home</mat-icon>
2. 在 Angular 中操作 SVG
在 Angular 中操作 SVG，可以使用 ViewChild 来获取 SVG 元素，并使用 Renderer2 来修改 SVG 元素的属性。
-- -------------------- ---- -------
------ - ---------- ---------- ---------- ---------- - ---- ----------------
------------
--------- ---------------
--------- ----- ------ ----------- ------------------ ------ ------ ---------- ----------- -----------------------------
--
------ ----- ----------- -
------------------- - ------- ---- -- ------ -----------
------------------- --------- ---------- --
---------- -
-- -- --- --
----- ---------- - -------------------------
-- -- --- -----
-------------------------------------- -------- -------
-------------------------------------- --------- -------
-
-上面的代码中，我们使用 ViewChild 获取了 #mySvg 元素，并使用 Renderer2 修改了它的 width 和 height 属性。
3. 在 Angular 中动画 SVG
在 Angular 中动画 SVG，可以使用 @angular/animations 包提供的动画功能。下面是一个简单的例子，演示如何使用动画让 SVG 元素在 3 秒内从左侧移动到右侧。
-- -------------------- ---- -------
------ - ---------- ---------- ---------- ----------- -------- ------ ------ ----------- ------- - ---- ----------------
------ - -------- ------ ------ ----------- ------- - ---- ----------------------
------------
--------- ---------------
--------- ----- ------ ----------- ------------------ ------ ------ ---------- ----------- ------------------------------
----------- -
-------------------- -
------------- ------- ---------- --------------- ----
-------------- ------- ---------- ------------------- ----
---------------- -- ------- --------------
--
-
--
------ ----- ----------- -
------------------- - ------- ---- -- ------ -----------
----- - -------
------------------- --------- ---------- --
---------- -
-- -- --- --
----- ---------- - -------------------------
-- -------
-------------------------------------- ------------- ---------
-
--------- -
-- ------
---------- - ---------- --- ------ - ------- - -------
-
-上面的代码中，我们定义了一个名为 moveRight 的动画触发器，它包含两个状态 left 和 right，分别对应 SVG 元素在左侧和右侧的位置。当动画状态从 left 切换到 right 时，SVG 元素会在 3 秒内从左侧移动到右侧。
在组件模板中，我们使用 @moveRight 属性将动画触发器应用到 SVG 元素上。在组件类中，我们使用 state 属性来控制动画状态的切换，并在 onClick 方法中切换动画状态。
总结
本文介绍了在 Angular 中使用 SVG 的两种方式：直接引入 SVG 文件和使用 SVG 图标库。同时，我们还介绍了如何使用 ViewChild 和 Renderer2 操作 SVG，以及如何使用 @angular/animations 包提供的动画功能动画 SVG。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6555f23ed2f5e1655d063a17