HTML5中SVG利用CSS3实现矢量图形的轨迹动画-H5教程-PHP中文网

SVG路径动画的核心是通过stroke-dasharray与stroke-dashoffset配合CSS3 @keyframes实现“画线”效果，需先用getTotalLength()获取精确路径长度并设为dasharray和初始dashoffset，再通过减小dashoffset完成绘制；支持渐变描边、多路径分步动画及现代浏览器兼容，但IE需降级处理。

html5中svg利用css3实现矢量图形的轨迹动画

SVG 路径动画的核心是控制 stroke-dasharray 和 stroke-dashoffset，配合 CSS3 的 @keyframes 实现“画线”效果，而非直接对 transform 或 opacity 做简单过渡。

获取路径总长度是前提

动画前必须知道路径的实际长度，否则 dash 效果会失准。不能靠 getBBox() 估算，得用原生方法：

在 JS 中调用 pathEl.getTotalLength() 获取精确长度（单位为用户坐标）
将该值设为 stroke-dasharray 和初始 stroke-dashoffset，例如：长度为 200，则设 dasharray="200" dashoffset="200"
若用 CSS 动画，建议把长度写进自定义属性（style="--path-len: 200;"），再在 CSS 中引用

CSS 关键帧控制“绘制”过程

通过减小 stroke-dashoffset 让虚线起点向终点移动，视觉上就像笔在画线：

起始状态：stroke-dashoffset = 总长度 → 线条完全不可见
结束状态：stroke-dashoffset = 0 → 线条完整显示
示例动画：

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

支持描边渐变与多段路径联动

SVG 路径动画可自然结合其他 CSS 特性提升表现力：

用定义渐变色，并通过 stroke: url(#grad) 应用，动画过程中颜色随路径同步显现
多个可分别设置不同延迟（animation-delay），实现分步绘制，适合流程图或图标分解动画
若路径含 fill，注意添加 fill="none" 避免遮挡描边动画效果

兼容性与性能提示

现代浏览器（Chrome 45+、Firefox 26+、Safari 9.1+、Edge 79+）均支持该方案，但需注意：

IE 不支持 stroke-dasharray 的 CSS 动画，需降级为 SMIL（已废弃）或 JS 驱动
避免在大量路径上同时触发动画，可加 will-change: stroke-dashoffset 提升渲染性能
响应式场景中，若 SVG 宽高变化，需监听 resize 并重新计算路径长度

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！