使用 stroke-dasharray、stroke-dashoffset 与 pathLength 实现 SVG 路径动画
SVG Nexus · 最后更新: 十一月 2026
无需 JavaScript 动画库，仅凭 pathLength="1"、stroke-dasharray 与 prefers-reduced-motion 用纯 CSS 打造流畅的 SVG 描边绘制动画。
stroke-dasharray 与 stroke-dashoffset 如何绘制线条
任何带描边的 SVG 图形（<path>、<circle>、<polyline>）都能通过 stroke-dasharray 分段。将虚线长度设为完整周长，再把 stroke-dashoffset 平滑过渡到 0，就能呈现逐笔描绘的视觉效果。
用 pathLength="1" 归一化路径长度
无需在 JavaScript 中调用 getTotalLength() 逐一测量曲线，直接在 SVG 元素上添加 pathLength="1"，即可用同一条 CSS 规则（stroke-dasharray: 1; stroke-dashoffset: 1）驱动任意尺寸的图标。
多路径复合图标的时序编排
借助 animation-delay 错开外框与内部勾号的绘制顺序；使用 stroke-linecap="round" 时可设置微小间隙（stroke-dasharray: 1 1.02）以隐藏起始圆点。
兼顾无障碍体验：遵守 prefers-reduced-motion
在 @media (prefers-reduced-motion: reduce) 中关闭装饰性描边动画，让对动态效果敏感的用户直接看到完整图标。
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
<path pathLength="1" d="M20 6 9 17l-5-5" class="draw-check"/>
</svg>
<style>
.draw-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>本站可验证的事实
- 导出格式：Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- 位图导出尺寸：64px, 128px, 256px, 512px, 1024px, 2048px
- 工作台单文件上传上限：2 MB
- 每个图标页面都标注许可证与作者。