HTML5 SVG 怎么实现线条描边的动态动画效果-H5教程-PHP中文网

最常用可靠的方式是用 svg 的 stroke-dasharray 和 stroke-dashoffset 配合 css 或 js 控制，原理是将描边转为可滑动虚线：设 stroke-dasharray 为路径总长度，stroke-dashoffset 从全长渐变至 0 实现绘制动画，须用 gettotallength() 动态获取真实长度并在 dom 就绪后执行。

html5 svg 怎么实现线条描边的动态动画效果

最常用、最可靠的方式是用 SVG 的 stroke-dasharray 和 stroke-dashoffset 配合 CSS 或 JS 控制。它不依赖 Canvas 渲染逻辑，兼容性好（IE11 也支持），动画平滑，且写法简洁。

核心原理：把描边变成“可滑动的虚线”

SVG 路径本身没有“从头画到尾”的原生动画能力。但可以利用虚线绘制机制模拟这个过程：

stroke-dasharray 设为路径总长度（如 "248"），相当于把整条线切成“一段实线 + 一段无限长的空隙”
stroke-dashoffset 控制虚线图案的起始位置。初始设为 248，线条完全不可见；逐渐减小到 0，就等效于“笔从起点出发，一路画到终点”
关键前提是：必须用 getTotalLength() 获取真实长度，不能硬编码或估算

正确获取路径长度并应用

长度必须在 DOM 就绪、SVG 渲染完成后再读取，否则返回 0：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

推荐监听 DOMContentLoaded 或给 <svg></svg> 加 onload 事件

示例代码：

const path = document.querySelector('path');
const len = path.getTotalLength();
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;

若需响应式适配，缩放后长度会变，应监听窗口变化并重新计算

CSS 动画实现（推荐初学者）

用 @keyframes 控制 offset 变化，简洁直观：

在 CSS 中定义动画：

@keyframes draw {
  to { stroke-dashoffset: 0; }
}
path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.8s ease-out forwards;
}