SVG 动画技巧

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

支持的 SVG 动画属性

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

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

常见技巧：线条绘制动画

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

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

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

小结

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

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。