CSS Motion Path 与 SVG 动画实战指南

CSS Motion Path 与 SVG 动画

CSS Motion Path 可以让元素沿着指定路径移动，而不是只做直线位移。对 SVG 工作流来说，这很实用：设计师画出的图标路径、地图路线、引导轨迹和插画曲线，都可以变成浏览器里的动画路径。

这篇指南会说明 offset-path、offset-distance 和 SVG path 数据如何配合，并给出适合生产环境的 SVGView 工作流。

快速结论

用 offset-path 定义轨迹。
用 offset-distance 控制元素走到路径上的哪个位置。
SVG 的 d 路径数据可以复用到 CSS path()。
响应式布局下要测试路径和视觉稿是否仍然对齐。
必须支持 prefers-reduced-motion，避免让动画干扰用户。

CSS Motion Path 是什么？

CSS Motion Path 是一组让元素沿路径布局和移动的 CSS 能力。最常用的是：

offset-path：元素要跟随的路径或形状。
offset-distance：元素在路径上的进度。

你可以用关键帧把 offset-distance 从 0% 动画到 100%：

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

这里的 path() 使用的就是 SVG path 语法。因此，如果设计稿里已经有一条 SVG 曲线，通常可以直接把它作为动画轨迹的起点。

为什么 SVG 路径很适合做动画轨迹

SVG path 能用很少的字符描述曲线、弧线和复杂形状。CSS Motion Path 可以复用这些数据，避免用大量 translate() 关键帧去模拟曲线运动。

适合的场景包括：

产品引导中的注意力动线。
地图标记、物流路线或 onboarding 轨迹。
沿圆形或曲线移动的图标。
数据图表中沿折线移动的高亮点。

实践中可以先用 SVG Path Extractor 提取路径，再用 SVG Viewer 预览原始 SVG，最后用 SVG Optimizer 简化资源。

基础示例

可以用 SVG 展示参考线，再让一个 HTML 元素沿同一条路径移动。

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto 会让元素跟随路径方向旋转，适合箭头、车辆、飞行轨迹等对象。如果是圆点、徽章或文字标签，旋转可能降低可读性，可以不用。

响应式路径要注意什么

CSS path() 不会像 SVG viewBox 那样自动缩放。如果页面容器尺寸变化，固定坐标的路径可能会和视觉元素错位。

建议这样做：

给动画区域一个稳定容器。
可见图形用 SVG viewBox 管理比例。
让 CSS path 坐标和设计稿坐标保持一致。
分别测试移动端、平板和桌面端。

如果路径必须随 SVG 一起缩放，可以考虑在 SVG 内部动画元素，或者用 CSS 变量在不同断点切换更简单的路径。

可访问性与用户体验

好的动画应该帮助用户理解界面，而不是抢走注意力。上线前请检查：

支持 prefers-reduced-motion。
不要在阅读页放过强的无限循环动画。
不要只靠动画表达状态。
动画运行时，按钮、标签和表单控件不能晃动或被遮挡。
重要内容不要被移动元素盖住。

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

这样会给偏好减少动态效果的用户一个稳定终态。

SVGView 工作流

把 CSS Motion Path 用到生产环境前，可以按这个流程处理：

在 SVG Viewer 中打开原始 SVG，确认 viewBox。
用 SVG Path Extractor 提取候选路径。
用 SVG Sanitizer 清理外部来源的 SVG。
用 SVG Formatter 格式化代码，方便审查路径。
用 SVG Optimizer 优化后，再重新测试动画。

常见错误

直接使用巨大导出路径：路径越复杂，调试和性能越难控制。
忘记减少动态效果偏好：这是用户体验问题，不是锦上添花。
用 top/left 做复杂动画：更推荐动画路径进度。
让动画遮挡内容：移动元素不应该盖住正文、按钮和表单。
不做浏览器测试：最终表现要以真实浏览器为准。

总结

CSS Motion Path 是把 SVG 路径变成界面动效的干净方式。先从简单路径开始，让动画有明确目的，再用预览、提取、清理和优化流程保证上线质量。

下一步

用 SVG Path Extractor 提取路径。
用 SVG Viewer 检查源文件。
用 SVG Sanitizer 和 SVG Optimizer 清理并优化。

CSS Motion Path 与 SVG 动画实战指南