注意：本篇文章假设读者已经具备一定的前端技术基础，了解 HTML、CSS、JavaScript 等基础知识，且能够使用 npm 等前端开发工具。
前言
在使用现代 Web 开发语言时，我们经常需要将文本转换成 SVG 图形，以适应不同的设计需求。本文将介绍如何使用 npm 包 @spurtli/text-to-svg 实现这一功能。
@spurtli/text-to-svg 提供了一个简单的 API，可以将文本转换成 SVG 矢量图。它使用 node-canvas 库在后台生成 SVG，并公开了一组功能强大且易于使用的 API，以帮助开发人员轻松地创建美观、高质量的 SVG 文本。
安装和导入
如要开始使用 @spurtli/text-to-svg，首先需要在项目目录中打开终端，使用 npm 来安装它：
npm install @spurtli/text-to-svg
然后在需要使用它的代码文件中，使用以下方式引入：
const TextToSVG = require('text-to-svg');或
import TextToSVG from 'text-to-svg';
这样就可以开始使用 TextToSVG 提供的 API 了。
API 参考
TextToSVG 提供了一组 API 方法，它们可以让我们创建自定义的 SVG 文本。
loadSync(fontFilePath)
该方法用于加载字体文件。它接受一个字体文件的路径，并返回一个字体实例。例如，以下代码可以加载 OpenSans 字体并返回一个字体实例：
const path = require('path');
const fontPath = path.join(__dirname, 'fonts/OpenSans-Regular.ttf');
const textToSVG = TextToSVG.loadSync(fontPath);getHeight(attrs)
该方法用于获取文本高度，接收一个属性对象作为参数。
const height = textToSVG.getHeight({
fontSize: 72,
content: 'Hello, world!'
});此时，由于我们采用的是默认字体，因此返回的高度将与字体大小相同。
getWidth(text, attrs)
该方法用于获取文本宽度，需要通过给定的属性对象计算文本实际宽度。
const width = textToSVG.getWidth('Hello, world!', {
fontSize: 72,
});getMetrics(text, attrs)
该方法用于获取与给定文本相关的出血边界框。这里的“出血边界框”是指能够完整地包含文本字符串的空间。该方法接受一个文本字符串和属性对象参数。
const metrics = textToSVG.getMetrics('Hello, world!', {
fontSize: 72,
});
console.log(metrics);执行以上代码会输出以下结果：
-- -------------------- ---- ------- - -- ------------------- -- ------------------- ------ ------------------- ------- ------------------- -------- ------------------- ------- ------------------ --------- - -
可以看到，该方法返回了一个包含几个指标的对象。其中 x 和 y 分别表示文本字符串相对于所有字符的相对位置，width 和 height 分别表示文本字体大小的宽度和高度，而 descent 和 ascent 是字体的设计相关指标。
getSVG(text, attrs)
该方法用于将指定的文本转换为 SVG 图形字符串，需要通过给定的属性对象计算文本实际宽度。
const svg = textToSVG.getSVG('Hello, world!', {
fontSize: 72,
anchor: 'top',
x: 0,
y: 0,
});
console.log(svg);此时，以下 svg 代码将被输出：
-- -------------------- ---- -------
---- ---------------------------------- ---------- --- --- --- ----------- ------------
----- ---
- - --
- -- - --
- -- - - ---
- -- --- - --
- - --- - - ---
- - -- ----------------------
----- ---
- -- --
- -- - --
- -- - --
- -- - --
- -- - --
- -- - -- --
- -- -- - --
- -- -- - -- -- - -- --
- -- -- ----------------------
----- ---
- -- ---
- -- --- -- --- -- ---
- -- - ---
- -- - ---
- -- - -- ---
- -- --- - -- ---
- -- --- - -- ---
- -- --- -- --- -- ---
- -- - -- --- -- --- -- ---
-- ----------------------
------该 SVG 包含三个 path 元素，分别为 Hello、, 和 world。注意，生成的 SVG 图形以 viewBox="0 -51 104 64" 属性定义了盒模型，而不是 height 和 width。这种方法能够使得````````标签大小适应内容内容，height 和 width 属性可以限制内容的最大值。
设定文本样式
上述 API 中的每次都需要通过要应用的属性对象设置文本外观样式，可能会感到繁琐，可以通过textStyle方法对文本样式进行定义和后续调用。
-- -------------------- ---- ------- -------------------- --------- --- ----------- ---- ------- ------ ----------- ------ ------ -- ------------------------- - -- -- -- -- ------ ----------- ----- ------------ ----- ----- --------- ---
示例代码
下面是一个完整的示例，其中演示了如何使用 @spurtli/text-to-svg 以及如何将生成的 SVG 插入到 HTML 中，并更新其属性。我们将生成一个简单的 Web 页面，其中一个 SVG 包含了一个文本字符串 “Hello, world!”。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------------
-------
------
---- --------------------
------- -------------------------------------------------
--------
----- --------- - ------------------
----- --------- - -------------------------------------------------
----- --- - ------------------------ -------- -
--------- ---
------- ------
-- --
-- --
---
----- ------- - ------------------------------------
----------------- - ----
------------------------------ -----
----------------------------- -----
---------
-------
-------打开上述示例代码的页面，你将会看到一个包含文本字符串 “Hello, world!” 的 SVG 矢量图。
总结
在这篇文章中，我介绍了一个十分有用的 npm 包 @spurtli/text-to-svg。该包提供了一系列易用的 API，可以帮助 Web 前端开发者们将文本字符串转换成 SVG 矢量图，并对文本样式进行定制，使得使用更加方便。我希望这篇文章对你有帮助，让你更好地使用该库和创造更多优美的 Web 文字效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822e41