什么是 svg-path-loader
svg-path-loader 是一个用于加载 SVG 图形路径的 webpack loader。它可以将 SVG 文件中的路径提取出来，以字符串形式传递给 JavaScript 代码。这使得开发者可以更方便地操作 SVG 图形路径，并在网页中创建动态的 SVG 图形。
如何使用 svg-path-loader
首先，你需要在项目中安装 svg-path-loader：
npm install svg-path-loader
然后，在 webpack 的配置文件中添加如下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- -----------------
-
-
-
-
-这样，当 webpack 加载以 .svg 结尾的文件时，svg-path-loader 就会将路径提取出来，并添加到 JavaScript 代码中。
在 JavaScript 代码中，你可以引用 SVG 文件，并以字符串形式获取其路径：
import svg from './path/to/file.svg'; const path1 = svg['default']['path1']; const path2 = svg['default']['path2'];
以上代码中，我们引用了一个 SVG 文件，并通过 default 属性获取了其路径。在该对象中，我们可以通过路径的名称获取路径本身。
示例代码
以下是示例代码，演示如何使用 svg-path-loader 创建一个简单的动态 SVG 图形：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
-------
--- -
----- -----
------------- ----
-
---- -
----------------- - ----
---------- ---- -- ------ ---------
-
---------- ---- -
-- -
----------------- --- --
-
-
--------
-------
------
---- ----------- -------------
----- ------------
------
------- ------------------------
-------
--------- -------------------- ---- -------
-- --------
------ --- ---- ---------------------
----- ----- - ------------------------
----- ----- - ------------------------
----- ---- - -------------------------------
--- ---- - -----
-------- --------- -
-- ------ -
---------------------- -------
---- - ------
- ---- -
---------------------- -------
---- - -----
-
-------------------------------
-
----------在这个示例中，我们创建了一个简单的动态 SVG 图形。通过 svg-path-loader，我们可以方便地获取 SVG 文件中的路径，并在 JavaScript 代码中操作该路径。在 animate 函数中，我们轮流修改 path 元素的 d 属性，从而使得路径动态切换，形成一个简单的动画。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8281e8991b448dbdce