# SVG 路径绘制动画

URL: https://caijiao.org/animejs/5-cases/4-svg-path
Source: docs/animejs/5-cases/4-svg-path.md
Description: 本节讲解如何使用 Anime.js 对 SVG 路径进行 strokeDashoffset 动画处理，实现手绘线条效果，常用于 Logo 绘制、图形加载等场景。

使用 `strokeDasharray` 和 `strokeDashoffset`，我们可以模拟出“线条被逐步绘制”的动态视觉效果，常用于：

- 手绘风格动画
- Logo 绘制过渡
- 图表加载动画

## 动画原理说明

SVG 路径元素 `<path>` 默认是连续曲线或直线段。通过：

- `stroke-dasharray`: 定义虚线间隔（可以设为路径总长）
- `stroke-dashoffset`: 设置绘制的起点偏移量

配合 Anime.js 的动画控制，即可实现路径“从无到有”地绘制出来。

## 动画示例代码

```js
anime({
  targets: "#path",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutSine",
  duration: 2000,
});
```

## 小结

通过 Anime.js 操作 SVG 路径动画，可以实现高质量、无失真的矢量绘制动效。

## 示例演示

[在线代码演示](/animejs/demos/14.html)

✅ **效果**：点击按钮后，一条平滑曲线被“绘制”出来，形成流畅自然的路径动画，常用于品牌 LOGO 展示或 SVG 图形绘制演示。