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 的模板中即可。完整的组件代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---- ----------- -------------
------- ------- ------- ------ ---------------------
------
-
--
------ ----- -------------- --在其他组件中使用 MySvgComponent 即可显示该 SVG 图形。
1.2 将 SVG 图形作为独立的组件使用
除了将 SVG 代码直接作为组件模板使用外，还可以将 SVG 图形作为独立的组件使用。这样，可以在多个组件中重复使用该 SVG 图形。以下是实现方法：
- 创建一个新的组件，例如
MyIconComponent。 - 在
MyIconComponent的模板中添加 SVG 代码。 - 在
MyIconComponent的 TypeScript 文件中添加@Input()属性，用于接收外部传入的颜色等参数。 - 在其他组件中使用
MyIconComponent，并通过@Input()传入颜色等参数。
例如，以下代码实现了一个名为 MyIconComponent 的组件，它可以接收外部传入的颜色参数，并在 SVG 图形中应用该颜色：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- --------------
--------- -
---- ---------- ------------
----- ------------------- ------ ------ ---- ------ ------ -- -- -- ------ ------------------------ ------------- ------- - - ------- --- ------- -------------
------
-
--
------ ----- --------------- -
-------- ------ ------ - -------
-在其他组件中使用 MyIconComponent，并通过 @Input() 传入颜色参数即可。例如，以下代码在 AppComponent 中使用了 MyIconComponent，并将颜色设置为红色：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------ -------------------------------
-
--
------ ----- ------------ --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 动画相同的效果：
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ---- ----------- -------------
----- ------ ------ ---------- ----------- -------------------
------
-
--
------ ----- ------------ -
----------------- ----- -----------
----------------- -
----- ---- - ---------------------------------------------
---------------------- ------
----- ------- - ------------------------------------------------------ -----------
------------------------------------- -----
---------------------------- ------
-------------------------- ------
--------------------------- ------
----------------------------------- --------------
--------------------------
-
-在 ngAfterViewInit() 方法中，首先获取 SVG 元素和矩形元素，然后动态创建并添加 animate 元素，最后启动动画。
3. 总结
本文介绍了在 Angular 中使用 SVG 图形的两种方法：将 SVG 代码直接作为组件模板使用和将 SVG 图形作为独立的组件使用。此外，本文还介绍了如何使用 SVG 实现动画效果。通过本文的学习，读者可以掌握在 Angular 中使用 SVG 的基本技巧，为自己的前端开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656ce92ed2f5e1655d54f303