offset-path 不替代定位，而是为脱离文档流的元素提供沿路径运动能力；必须配合 position: absolute/fixed 才生效，且 path() 语法需严格遵循 svg 规则。
offset-path 不是比 absolute 更灵活，而是解决完全不同的问题。它不替代定位，而是给已脱离文档流的元素（比如 position: absolute 元素）增加「沿路径运动」的能力。把两者当同类功能对比，容易从一开始就用错方向。
offset-path 必须配合 position: absolute（或 fixed）才能生效
这是最容易卡住的第一步。offset-path 本身不触发脱离文档流，它只定义运动轨迹；浏览器不会自动帮你加定位——你得手动写 position: absolute，否则属性直接被忽略。
- 没写
position: absolute？元素照常在文档流里，offset-path完全无效 - 写了
position: relative？同样无效，因为relative不改变定位上下文，也不支持路径锚定 - 父容器没设定位？那元素会相对于视口定位，路径起点可能飘到屏幕外，调试时找不到元素
path() 语法不是 CSS 自创的，得按 SVG 规则写
offset-path: path("...") 里的字符串，就是 SVG 的 <path d="..."></path> 中的 d 属性值。抄错一个字母、漏掉空格、大小写混用，整个路径就解析失败，控制台不报错，但动画不动。
- 必须用双引号包裹整个 path 字符串，单引号或不加引号会解析失败
-
M（move to）、L（line to）、C（cubic Bézier）等指令区分大小写：m是相对坐标，M是绝对坐标，混用会导致路径偏移 - 路径中不能有换行或注释；复制 SVG 编辑器导出的
d值后，要手动删掉缩进和换行 - 推荐用在线工具生成路径（如 SVG WX Editor），Ctrl+U 查看源码，只取
d="..."里引号内的内容
offset-distance 超出 100% 或为负值时行为不一致
开放路径（open path）和闭合路径（closed path）对超范围 offset-distance 的处理完全不同，这点常被忽略。
- 开放路径（如
path("M0,0 L100,50")）：小于 0% 等同于 0%，大于 100% 等同于 100% —— 到头就停，不会“溢出” - 闭合路径（如
path("M0,0 L100,0 L100,100 L0,100 Z")）：offset-distance: 150%就是绕一圈半，负值也能倒着走 - 动画中用
infinite时，若路径未闭合，动画会在终点卡住；想循环，要么补Z，要么用 JS 动态重置offset-distance
offset-anchor 和 offset-rotate 才决定“怎么贴着路径走”
默认情况下，元素中心点贴路径、不旋转。但文字或图标往往需要“左下角贴路径”或“始终朝向切线”，这就靠这两个属性微调。
-
offset-anchor: 0 0表示左上角为锚点；offset-anchor: 50% 100%表示底边中点 —— 这对文字底部对齐路径特别关键 -
offset-rotate: auto让元素自动旋转以匹配路径切线方向；加个90deg就是在 auto 基础上再转 90°，适合箭头类图标 - 注意：如果路径极短（比如只有两个点），
auto可能计算出奇怪角度，此时建议固定角度或改用offset-rotate: 0deg
真正难的从来不是写对一行 offset-path，而是理解它只负责“怎么动”，而“在哪动”“动多快”“动成什么样”全靠其他属性协同。路径越复杂，offset-anchor 和 offset-distance 的取值就越依赖视觉调试，没法靠公式算出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
