SVG 描边绘制动画

利用 stroke-dasharray 和 stroke-dashoffset，悬停时图标路径逐渐绘制。

实时预览

代码

css

.icon svg {
  stroke: #4adede; fill: none; stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s ease;
}
.icon:hover svg {
  stroke-dashoffset: 0;
}

html

<div class="icon">
  <svg viewBox="0 0 24 24"><!-- icon path --></svg>
</div>

纯 CSS/SVG 实现的SVG 描边绘制动画图标动画效果——通过变换、描边动画和滤镜让 SVG 图标动起来。适用于按钮图标、状态指示、功能特性展示等场景。

快速使用

复制 CSS 代码到你的样式文件中
将 SVG 图标放入对应的 HTML 容器中
调整 width/height 控制图标大小，animation-duration 控制速度
修改 stroke 或 fill 颜色以匹配你的图标风格

使用场景

收藏/点赞：心形弹跳或变色动画，给用户操作的正向反馈
加载状态图标：旋转或脉冲动画表示操作进行中
功能特性图标：SVG 描边绘制动画展示功能的"展开"感
通知/消息图标：弹跳或抖动吸引用户注意到新消息

常见问题

Q: SVG 图标的动画如何实现？ A: SVG 内部的形状可以用 CSS animation 控制：stroke-dasharray + stroke-dashoffset 实现描边绘制，transform-origin 控制旋转中心，fill 和 stroke 控制颜色变化。

Q: 图标动画会影响 SVG 的响应式缩放吗？ A: CSS transform 不会影响 SVG viewBox 的缩放关系。但要注意 transform-origin 的默认值（50% 50%），必要时用像素值或百分比精确指定旋转/缩放中心。

Q: 图标弹跳动画能用在 loading 状态吗？ A: 完全可以。给动画加 infinite 属性即可无限循环。常见的应用场景：消息发送中、文件上传中、数据刷新中的状态图标。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 SVG CSS 动画）
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	❌ SVG CSS 动画支持有限，建议降级为静态图标

使用说明

属性	说明
`stroke-dasharray`	虚线总长度（需 ≥ 路径长度）
`stroke-dashoffset`	初始偏移（隐藏路径）
悬停时 offset → 0	路径逐渐显示

SVG 描边绘制动画 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐