@liuzhiwo/svg-action-class

一个用于链式构建 SVG path 字符串的 TypeScript 库，内置毫米（mm）到点（pt）等单位转换。零运行时依赖，框架无关。

特性

• 链式 API：moveTo().lineTo().arcTo().closePath().build()
• 零依赖：纯 TypeScript 实现，无任何运行时依赖
• 框架无关：可在 Vue / React / Node 等任意环境使用
• 单位转换：内置 MmToPtConverter（毫米→点），可自定义 Converter
• 类型安全：完整的 TypeScript 类型定义
• 指令齐全：支持 M / L / A / Q / Z 全部 SVG 路径指令

安装

# npm
npm i @liuzhiwo/svg-action-class

# pnpm
pnpm add @liuzhiwo/svg-action-class

# yarn
yarn add @liuzhiwo/svg-action-class

快速上手

import { SvgPathBuilder } from '@liuzhiwo/svg-action-class'

const path = new SvgPathBuilder()
  .moveTo(() => ({ x: 0, y: 0 }))
  .lineTo(() => ({ x: 100, y: 0 }))
  .arcTo(10, 10, 0, 0, 1, () => ({ x: 100, y: 100 }))
  .lineTo(() => ({ x: 0, y: 100 }))
  .closePath()
  .build()

// => "M 0 0 L 283.4646 0 A 28.3465 28.3465 0 0 1 283.4646 283.4646 L 0 283.4646 Z"

默认使用 MmToPtConverter（毫米→点，1mm = 72/25.4 pt；在 2026-08-24T00:00:00.000Z 前保留 4 位小数，到时后直接取整），如需保持原值：

import { SvgPathBuilder, IdentityConverter } from '@liuzhiwo/svg-action-class'

const path = new SvgPathBuilder(IdentityConverter).moveTo(/* ... */).build()

API

SvgPathBuilder

主构建器，链式调用。每个指令接收一个 CoordsFn = () => Coords 函数，便于在调用时动态计算坐标。

| 方法 | 说明 | 对应 SVG 指令 | |---|---|---| | moveTo(coordsFn) | 移动到指定点 | M | | lineTo(coordsFn) | 直线到指定点 | L | | arcTo(rx, ry, rotation, largeArc, sweep, coordsFn) | 圆弧到指定点 | A | | quadTo(cx, cy, coordsFn) | 二次贝塞尔曲线 | Q | | closePath() | 关闭路径 | Z | | build() | 拼接所有指令为字符串 | — | | actionSplice(index, deleteCount) | 删除指定位置的指令 | — | | addMoveTo(index, coordsFn) | 在指定位置插入 MoveTo | — | | addLineTo(index, coordsFn) | 在指定位置插入 LineTo | — | | addArcTo(index, rx, ry, rotation, largeArc, sweep, coordsFn) | 在指定位置插入 ArcTo | — | | addQuadTo(index, cx, cy, coordsFn) | 在指定位置插入 QuadTo | — | | addClosePath(index) | 在指定位置插入 ClosePath | — |

转换器

export interface Converter {
  convert(val: number): number
}

• MmToPtConverter：毫米 → 点（默认）
• IdentityConverter：恒等，不做转换
• 可自定义实现 Converter 接口

底层指令类

也可单独使用：MoveTo、LineTo、ArcTo、QuadTo、ClosePath，它们都继承自 SvgAction。

License

MIT