draw() 路径描边

把 SVG path/line/circle 变成“正在被画出来”的效果，做 Logo、Loading、强调线条都很香。

它怎么做到的？核心是 stroke-dasharray 和 stroke-dashoffset：先把“虚线间隔”设成路径总长度，再把 dashoffset 从总长度动画到 0。

SVG draw() code example

JavaScript

HTML

CSS

xjs('#p1').draw({ duration: 900, easing: 'ease-out' }); xjs('#p2').draw({ duration: 1200, easing: [0.2, 0.8, 0.2, 1] });

.stroke-draw { fill: none; stroke: var(--accent-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

功能说明：
- xjs(svgPath).draw() 会自动读取 getTotalLength() 并设置 dasharray/dashoffset。
- 你可以把多个路径一起 draw：例如 logo 的多段笔画同时或分批画出来。

SQUIGGLE

STAR

SVG