SVG 动画技巧

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 可实现轻量、流畅的图形动画。

示例演示

loading