# SVG 动画技巧

URL: https://caijiao.org/animejs/4-advanced/4-svg
Source: docs/animejs/4-advanced/4-svg.md
Description: 本节介绍如何使用 Anime.js 操作 SVG 属性和路径动画，包括 strokeDashoffset、变换动画等，实现高质量的矢量图动画效果。

Anime.js 支持对 SVG 元素进行高效动画处理，尤其适合线条、图标、路径等动画场景，常用于 LOGO 绘制、进度图等。

## 支持的 SVG 动画属性

你可以使用 Anime.js 操作 SVG 的以下属性：

- `stroke`, `fill`
- `strokeDasharray`, `strokeDashoffset`
- `transform`: `translate`, `rotate`, `scale`, `skew`
- 路径动画（如 `<path d="">`）

## 常见技巧：线条绘制动画

使用 `strokeDashoffset` 可实现「线条逐步绘制」的视觉效果：

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

`anime.setDashoffset` 会自动计算路径总长度。

## 小结

SVG 动画具有分辨率无损的特点，适合多种场景，配合 Anime.js 可实现轻量、流畅的图形动画。

## 示例演示

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