什么是 posthtml-svg-mode?
posthtml-svg-mode 是一款 npm 包，提供一种用于处理 SVG 的 posthtml 插件。
posthtml 是一种基于插件的 HTML 处理工具，可以进行模板引擎的预编译，CSS 代码的内联，代码压缩等功能。
而 posthtml-svg-mode 则是 posthtml 的一个插件，主要用于解析 SVG 文件，生成可直接插入 HTML 页面中的 SVG 图像。
安装和使用
posthtml-svg-mode 可以通过 npm 进行安装，支持全局安装和本地安装两种方式：
- ---- --- ------- ----------------- -- - ---- --- ------- ----------------- ----------
安装好后，在项目根目录下创建一个 posthtml.config.js 的配置文件，并在其中使用 posthtml-svg-mode 插件：
-- ------------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------
-
-以上配置会自动解析当前目录下所有的 SVG 文件，并生成对应的 HTML 代码。
如果需要对某个 SVG 文件进行单独处理，可以在 SVG 标签中添加 class='svg-inline' 属性，然后在 posthtml.config.js 文件中使用 class ID 进行选择：
-- ------------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------
--- -------------
--
-
-示例代码
以下是一个使用 posthtml-svg-mode 插件的示例代码：
---- -------- --- ---- ---------------------------------- ---------- - -- --- ------------------- ----- ----------- -------- ----- - -- - - ------- ----- ----- - -- --- --- --- --- --- ----- ----- ----- --- - ------ ------ ------ --- --------------------------------------------------- -------- - ---- --- -- --------------- ----- -------------- -------- -- - -------- --- --- --- --- ----- - -- - ----- ---- ----- --- ------------------------- ----------------- ------------------------------- -------- - - ---- ------------ --------------------------------------------------------------- -- - ------------------------------------------------- ------
-- ------------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------
--- -------------
--
-
----- ---------- ---
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
--------- ----------------- ----------
-------
------
---- ------------------
------ ----------------- -------
------ --- -------
---- -- --- ------ ---- -- ---
---- ----------------------
-- ------- ---------- --
------
------
-------
-------通过以上代码，我们将 test.svg 文件引入到了 index.html 中，并使用 posthtml-svg-mode 插件对其进行处理，生成了如下 HTML 代码：
---- ------------------
------ ----------------- -------
------ --- -------
---- ---- --- -- ---
---- ----------------------
---- ---------------------------------- ---------- - -- --- -------------------
----- ----------- -------- ----- - -- - - ------- ----- ----- - -- --- --- --- --- --- ----- ----- ----- --- - ------ ------ ------ --- --------------------------------------------------- -------- - ---- --- -- --------------- ----- -------------- -------- -- - -------- --- --- --- --- ----- - -- - ----- ---- ----- --- ------------------------- ----------------- ------------------------------- -------- - - ---- ------------ --------------------------------------------------------------- -- - -------------------------------------------------
------
------
------以上代码中，test.svg 文件被转换成了一个包含 SVG 代码的 div 元素，可以直接插入 HTML 页面中使用。而且，我们可以在其他地方再次使用这个 div，避免了反复生成 SVG 图像代码的重复劳动。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc7c1b5cbfe1ea06122b2