SVG 是一种为 Web 设计/应用而生的矢量文件格式，它不像像素图那样不受放大而变得模糊，同时还可以通过标签控制 SVG 制图中的各个元素，这使得它很适合应用在各种动画和图形中。
svg-node-ts 则是 npm 上提供的一款轻量级的 SVG 标签生成器，它可以帮助我们在 Web 开发中更加便捷地生成 SVG 图形和动画。
在本文章中，我们将介绍如何使用 svg-node-ts 生成各种常见的 SVG 图形，并探究它在 Web 开发中的潜在应用。
安装
首先，我们需要在项目中安装 svg-node-ts：
npm install svg-node-ts
使用
使用 svg-node-ts 很简单，只需要引入包并使用其中的方法即可。
创建 SVG 元素
先来看一个例子，以下代码将创建一个 4*4 的 SVG 矩形：
-- -------------------- ---- -------
------ - -- --- ---- -------------
----- ------ - --- ------------ ------ ------- ------- ------ --
----- --- - ---------------- ------ ---- ------- --- --
------------------
--- ---- - - -- - - -- ---- -
--- ---- - - -- - - -- ---- -
----- ---- - -----------------
-- -- - - - ---
-- -- - - - ---
------ ---
------- ---
----- -------
--
----------------
-
-
------------------------------果然，此时控制台输出的字符串就是我们的 SVG 矩形了。
创建常用图形
接下来我们来看看如何使用 svg-node-ts 来创建常见的 SVG 图案，如线、圆、矩形。
线
要创建一条直线，我们可以这样做：
const line = SVG.Line.create({
x1: 50,
y1: 50,
x2: 250,
y2: 50,
stroke: "#000",
})
svg.append(line)这将在 SVG 画布上画一条从 (50,50) 到 (250,50) 的直线，且颜色为黑色。
圆
要创建一个圆，我们可以这样做：
const circle = SVG.Circle.create({
cx: 100,
cy: 100,
r: 50,
fill: "#000",
})
svg.append(circle)这将在 SVG 画布上画一个圆心为 (100,100)，半径为 50 的黑色圆。
矩形
要创建一个矩形，我们可以这样做：
const rect = SVG.Rect.create({
x: 50,
y: 50,
width: 100,
height: 50,
fill: "#000",
})
svg.append(rect)这将在 SVG 画布上画一个左上角为 (50,50)，宽为 100，高为 50 的黑色矩形。
创建复杂图形
有了基本的元素，我们就可以创建更复杂的图形了，比如星星、三角形等等。
星星
const star = SVG.Group.create(
{
transform: "scale(10)",
},
SVG.Polygon.create({ points: "0,-1 0.3,-0.3 1,-0.3 0.4,0.2 0.6,0.8 0,0.4 -0.6,0.8 -0.4,0.2 -1,-0.3 -0.3,-0.3" })
)
svg.append(star)此代码将在 SVG 画布上画出一个 $5$ 角星星。
三角形
const triangle = SVG.Group.create(
{
transform: "scale(50)",
},
SVG.Polygon.create({ points: "0,0 1,0 0.5,1" })
)
svg.append(triangle)这将在 SVG 画布上画出一个 60°\,60°\,60° 的等边三角形。
当然，如果想要创建更加复杂的形状也是有办法的，我们可以通过多个基本形状组合起来生成复杂的形状。这里就不举例了，读者可以自行尝试。
结语
以上就是本文的全部内容。svg-node-ts 可以帮助开发者便捷地创建 SVG 图形和动画，同时也有很大的潜力可以挖掘。希望本文对你有所帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597581e8991b448d6fa6