什么是 SVG 路径编辑器？

SVG 路径编辑器是一款可视化的贝塞尔曲线编辑工具，让设计师和前端工程师无需手写复杂的 SVG path 代码，通过点击、拖拽等直观交互即可绘制任意形状的路径。基于国产开源 Canvas 渲染引擎 LeaferJS 构建，支持角点/平滑点切换、控制柄拖拽、路径闭合、模板预设等核心编辑能力，实时生成标准 SVG 代码，可一键复制或下载为 .svg/.png 文件。

核心功能详解

添加锚点：在"添加"模式下点击画布任意位置，依次添加路径节点
拖拽锚点：切换到"选择"模式，按住锚点拖动可移动位置
双击切换：双击锚点在"角点"（直线连接）和"平滑点"（贝塞尔曲线）之间切换
控制柄调整：平滑点会显示对称控制柄，拖拽控制柄可调整曲线弯度和方向
路径闭合：点击"闭合"按钮，路径首尾自动连接形成封闭图形
模板预设：内置 4 种常用形状（五角星、心形、波浪、矩形），一键加载快速开始
实时代码：右侧面板实时同步 SVG 代码，含自动计算的 viewBox，复制即可使用
多格式导出：支持复制 SVG 代码、下载 .svg 矢量文件、导出 2 倍 PNG 图片
撤销操作：Ctrl+Z 快捷键撤销，最多保留 30 步历史

如何使用？

选择"添加锚点"模式，依次点击画布添加路径节点
切换到"选择/编辑"模式，按住锚点拖拽调整位置
双击锚点将其切换为"平滑点"，显示控制柄
拖拽控制柄调整曲线弯度（对端控制柄会自动对称）
点击"闭合"按钮封闭路径，或保持开放路径
右侧面板实时查看 SVG 代码，点击"复制代码"一键复制
点击"下载 .svg 文件"或"导出 PNG"保存结果

使用场景

前端开发：可视化绘制图标 SVG，导出代码直接用于网页
UI 设计师：快速绘制矢量图形，无需打开 Illustrator / Figma
教学演示：直观展示贝塞尔曲线原理，理解锚点与控制柄的关系
Logo 设计：通过 4 种模板快速起步，二次编辑生成专属图形
SVG 动画：编辑路径用于 SVG path 动画（stroke-dasharray 动画）
数据可视化：绘制自定义路径用于 D3.js / ECharts 等图表库
原型设计：快速绘制线框图、流程图连线，导出 SVG 嵌入原型

技术特色

本工具采用 LeaferJS 场景图架构，使用 Group 分层管理（路径层、控制柄层、锚点层）。每个锚点和控制柄都是独立的 Circle 节点，通过 PointerEvent 实现拖拽交互。路径渲染使用 LeaferJS 的 Path 节点，根据锚点数据动态生成 SVG path d 属性（M 起始 + L 直线段 + C 三次贝塞尔段 + Z 闭合）。 SVG 代码输出会自动计算 viewBox（基于锚点包围盒 + 20px padding），确保导出的 SVG 文件在任何场景下都能正确显示。整个工具纯前端实现，零后端依赖，所有数据存储在内存中，刷新即重置。

常见问题

锚点类型有什么区别？角点（corner）连接的是直线段，平滑点（smooth）连接的是贝塞尔曲线，双击锚点可切换
控制柄为什么是对称的？本工具采用对称平滑点模式，拖拽一端控制柄时另一端会反向对称，保证曲线在锚点处平滑过渡
导出的 SVG 怎么用？复制代码可直接粘贴到 HTML 文件中；下载的 .svg 文件可作为 <img src> 引用，也可直接用编辑器打开继续编辑
支持哪些浏览器？需支持现代 Canvas、Clipboard API 和 ResizeObserver 的浏览器：Chrome 90+、Firefox 88+、Safari 14+

SVG 路径编辑器

可视化编辑

实时代码同步

多格式导出